From 87983e1af479a1bc58d3e6eb538644ca3f7045d4 Mon Sep 17 00:00:00 2001 From: Daniel Belcher Date: Thu, 16 Nov 2023 08:32:44 -0800 Subject: [PATCH 1/5] first pass through Padma feedback --- .../ui/src/components/RHF/FieldArray.tsx | 13 ++----- src/services/ui/src/components/RHF/Slot.tsx | 1 + src/services/ui/src/components/RHF/types.ts | 5 ++- src/services/ui/src/pages/form/proto.tsx | 36 +++++++++++-------- 4 files changed, 30 insertions(+), 25 deletions(-) diff --git a/src/services/ui/src/components/RHF/FieldArray.tsx b/src/services/ui/src/components/RHF/FieldArray.tsx index 6824f1367a..ab132caa75 100644 --- a/src/services/ui/src/components/RHF/FieldArray.tsx +++ b/src/services/ui/src/components/RHF/FieldArray.tsx @@ -1,5 +1,5 @@ import { FieldValues, useFieldArray } from "react-hook-form"; -import { Trash2 } from "lucide-react"; +import { Plus, Trash2 } from "lucide-react"; import { RHFSlot } from "./Slot"; import { Button, FormField } from "../Inputs"; @@ -60,15 +60,8 @@ export const RHFFieldArray = ( })}
diff --git a/src/services/ui/src/components/RHF/Slot.tsx b/src/services/ui/src/components/RHF/Slot.tsx index 53bcea7b7c..2621f74682 100644 --- a/src/services/ui/src/components/RHF/Slot.tsx +++ b/src/services/ui/src/components/RHF/Slot.tsx @@ -264,6 +264,7 @@ export const RHFSlot = < name={name} fields={rest.fields ?? []} groupNamePrefix={groupNamePrefix} + {...(props as RHFComponentMap["FieldArray"])} /> )} diff --git a/src/services/ui/src/components/RHF/types.ts b/src/services/ui/src/components/RHF/types.ts index 44597d09b0..cfd22ad809 100644 --- a/src/services/ui/src/components/RHF/types.ts +++ b/src/services/ui/src/components/RHF/types.ts @@ -56,7 +56,9 @@ export type RHFComponentMap = { Checkbox: { options: RHFOption[]; }; - FieldArray: unknown; + FieldArray: { + appendText?: string; + }; FieldGroup: { appendText?: string; removeText?: string; @@ -89,6 +91,7 @@ export type FieldArrayProps< name: TFieldArrayName; fields: RHFSlotProps[]; groupNamePrefix?: string; + appendText?: string; }; export type FieldGroupProps< diff --git a/src/services/ui/src/pages/form/proto.tsx b/src/services/ui/src/pages/form/proto.tsx index 136cc534ae..5c29634468 100644 --- a/src/services/ui/src/pages/form/proto.tsx +++ b/src/services/ui/src/pages/form/proto.tsx @@ -28,6 +28,9 @@ export const ABP1: Document = { { rhf: "FieldArray", name: "eligibility_groups", + props: { + appendText: "Add group", + }, fields: [ { rhf: "Select", @@ -288,7 +291,7 @@ export const ABP1: Document = { { rhf: "Select", name: "mandatory_voluntary", - label: "Mandatory or voluntary", + label: "Mandatory or Voluntary", rules: { required: "* Required", }, @@ -317,7 +320,6 @@ export const ABP1: Document = { { rhf: "Select", name: "is_enrollment_available", - label: "Alternative Benefit Plan population name", rules: { required: "* Required", }, @@ -348,12 +350,11 @@ export const ABP1: Document = { }, form: [ { - description: "Targeting criteria (select all that apply)", + description: "Targeting criteria (check all that apply)", slots: [ { rhf: "Checkbox", name: "target_criteria", - label: "Mandatory or voluntary", rules: { required: "* Required", }, @@ -413,7 +414,7 @@ export const ABP1: Document = { props: { options: [ { - label: "Federal Poverty Level", + label: "Federal poverty level", value: "federal_poverty_level", slots: [ { @@ -431,13 +432,12 @@ export const ABP1: Document = { }, name: "federal_poverty_level_percentage", label: - "Enter the Federal Poverty Level percentage", + "Enter the federal poverty level percentage", }, ], }, { - label: - "SSI Federal Benefit Amount.", + label: "SSI federal benefit amount", value: "ssi_federal_benefit_amount", slots: [ { @@ -460,14 +460,14 @@ export const ABP1: Document = { ], }, { - label: "Other.", + label: "Other", value: "other", slots: [ { rhf: "Input", name: "other_percentage", label: - "Enter the Other percentage", + "Enter the other percentage", props: { icon: "%", }, @@ -554,7 +554,7 @@ export const ABP1: Document = { value: /^\d*(?:\.\d{1,2})?$/, message: - "Must be all numbers, no commas. e.g. 1234.56", + "Must be a positive number, maximum of two decimals, no commas. e.g. 1234.56", }, required: "* Required", @@ -609,7 +609,7 @@ export const ABP1: Document = { ], }, { - label: "Standard Varies by region", + label: "Standard varies by region", value: "region_standard", form: [ { @@ -644,6 +644,10 @@ export const ABP1: Document = { { rhf: "FieldArray", name: "income_definition_region_statewide_arr", + props: { + appendText: + "Add household size", + }, fields: [ { rhf: "Input", @@ -752,14 +756,14 @@ export const ABP1: Document = { appendText: "Add Living Arrangement", removeText: - "Remove Living Arrangement", + "Remove living arrangement", }, fields: [ { rhf: "Input", name: "name_of_living_arrangement", label: - "Living Arrangement Name", + "Name of living arrangement", rules: { required: "* Required", @@ -777,6 +781,10 @@ export const ABP1: Document = { { rhf: "FieldArray", name: "income_definition_specific_statewide_arr", + props: { + appendText: + "Add household size", + }, fields: [ { rhf: "Input", From 92468f872dea16bfec4042678f2557e7b0ecfe42 Mon Sep 17 00:00:00 2001 From: Daniel Belcher Date: Thu, 16 Nov 2023 09:25:06 -0800 Subject: [PATCH 2/5] text changes --- src/services/ui/src/pages/form/proto.tsx | 28 ++++++++++++++---------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/src/services/ui/src/pages/form/proto.tsx b/src/services/ui/src/pages/form/proto.tsx index 5c29634468..632260b7c4 100644 --- a/src/services/ui/src/pages/form/proto.tsx +++ b/src/services/ui/src/pages/form/proto.tsx @@ -577,11 +577,11 @@ export const ABP1: Document = { value: "yes", form: [ { - description: - "Incremental dollar amount", slots: [ { rhf: "Input", + label: + "Incremental dollar amount", name: "dollar_incremental_amount_statewide_std", props: { icon: "$", @@ -707,11 +707,11 @@ export const ABP1: Document = { value: "yes", form: [ { - description: - "Incremental dollar amount", slots: [ { rhf: "Input", + label: + "Incremental dollar amount", name: "dollar_incremental_amount", props: { icon: "$", @@ -844,11 +844,11 @@ export const ABP1: Document = { value: "yes", form: [ { - description: - "Incremental dollar amount", slots: [ { rhf: "Input", + label: + "Incremental dollar amount", name: "dollar_incremental_amount", props: { icon: "$", @@ -880,7 +880,7 @@ export const ABP1: Document = { }, { label: - "Standard varies by some other way", + "Standard varies in some other way", value: "other_standard", form: [ @@ -890,8 +890,10 @@ export const ABP1: Document = { rhf: "FieldGroup", name: "income_definition_specific_statewide_group_other", props: { - appendText: "Add", - removeText: "Remove", + appendText: + "Add some other way", + removeText: + "Remove some other way", }, fields: [ { @@ -915,6 +917,10 @@ export const ABP1: Document = { { rhf: "FieldArray", name: "income_definition_specific_statewide_arr", + props: { + appendText: + "Add household size", + }, fields: [ { rhf: "Input", @@ -974,11 +980,11 @@ export const ABP1: Document = { value: "yes", form: [ { - description: - "Incremental dollar amount", slots: [ { rhf: "Input", + label: + "Incremental dollar amount", name: "dollar_incremental_amount", props: { icon: "$", From 92ea5305f5dc7e786826c0ce125106f842fa67ff Mon Sep 17 00:00:00 2001 From: Daniel Belcher Date: Thu, 16 Nov 2023 11:05:16 -0800 Subject: [PATCH 3/5] add char limit to fields and text changes --- .../ui/src/components/Inputs/textarea.tsx | 34 ++++++++++++++----- src/services/ui/src/pages/form/proto.tsx | 19 ++++++++--- 2 files changed, 40 insertions(+), 13 deletions(-) diff --git a/src/services/ui/src/components/Inputs/textarea.tsx b/src/services/ui/src/components/Inputs/textarea.tsx index e49c6161d3..2c262e4b5e 100644 --- a/src/services/ui/src/components/Inputs/textarea.tsx +++ b/src/services/ui/src/components/Inputs/textarea.tsx @@ -3,19 +3,37 @@ import * as React from "react"; import { cn } from "@/lib/utils"; export interface TextareaProps - extends React.TextareaHTMLAttributes {} + extends React.TextareaHTMLAttributes { + charcount?: "simple" | "limited"; + charcountstyling?: string; +} const Textarea = React.forwardRef( ({ className, ...props }, ref) => { + const strLn = (typeof props?.value === "string" && props.value.length) || 0; return ( -