From d732155aa4f31d4348dc259ca5b11371731bb0c4 Mon Sep 17 00:00:00 2001 From: "Gavin St. Ours" Date: Mon, 24 Jun 2024 16:54:33 -0400 Subject: [PATCH 1/2] fix:(webform): Bolding standards (#583) * Update bolding for ABP1 v2 * ABP1 v2: Additional bolding & copy changes * Ensure styledLabel displays as expected * Fix capitalization * ABP 3: Fix bolding * ABP 3.1: Update bolding and layout * Fix broken conditional logic * Fix label * Remove bold class * Fix broken dependency * Fix broken D1 dependency (see Figma) * Center label text verrtically next to checkbox --------- Co-authored-by: James Dinh --- src/services/api/webforms/ABP1/v202402.ts | 98 ++++++++++++++----- src/services/api/webforms/ABP10/v202401.ts | 2 +- src/services/api/webforms/ABP2B/v202401.ts | 2 +- src/services/api/webforms/ABP2C/v202401.ts | 2 - src/services/api/webforms/ABP3/v202401.ts | 7 ++ src/services/api/webforms/ABP3_1/v202401.ts | 27 ++++- src/services/api/webforms/ABP9/v202401.ts | 4 +- .../ui/src/components/Inputs/checkbox.tsx | 2 +- 8 files changed, 113 insertions(+), 31 deletions(-) diff --git a/src/services/api/webforms/ABP1/v202402.ts b/src/services/api/webforms/ABP1/v202402.ts index 455f0bd75..4aecbb886 100644 --- a/src/services/api/webforms/ABP1/v202402.ts +++ b/src/services/api/webforms/ABP1/v202402.ts @@ -16,6 +16,7 @@ export const v202402: FormSchema = { rhf: "Input", name: "abp-pop-name", label: "ABP package name", + labelClassName: "font-bold", rules: { required: "* Required", pattern: { @@ -44,6 +45,7 @@ export const v202402: FormSchema = { required: "* Required", }, label: "Eligibility group", + labelClassName: "font-bold", props: { sort: "ascending", className: "w-[300px]", @@ -273,6 +275,7 @@ export const v202402: FormSchema = { rhf: "Select", name: "mandatory-voluntary", label: "Mandatory or voluntary", + labelClassName: "font-bold", rules: { required: "* Required", }, @@ -331,7 +334,7 @@ export const v202402: FormSchema = { }, form: [ { - description: "Targeting criteria (check all that apply)", + description: "Targeting criteria", slots: [ { rhf: "Checkbox", @@ -414,6 +417,7 @@ export const v202402: FormSchema = { name: "fed-poverty-level-percent", label: "Percentage of federal poverty level", + labelClassName: "font-bold", }, ], }, @@ -426,6 +430,7 @@ export const v202402: FormSchema = { name: "ssi-fed-benefit-percentage", label: "Percentage of SSI federal benefit", + labelClassName: "font-bold", props: { icon: "%", }, @@ -448,6 +453,7 @@ export const v202402: FormSchema = { rhf: "Input", name: "other-percentage", label: "Other percentage", + labelClassName: "font-bold", props: { icon: "%", }, @@ -463,7 +469,8 @@ export const v202402: FormSchema = { { rhf: "Textarea", name: "other-describe", - label: "Describe:", + label: "Describe", + labelClassName: "font-bold", rules: { required: "* Required", pattern: { @@ -501,10 +508,16 @@ export const v202402: FormSchema = { { rhf: "FieldArray", name: "income-def-specific-state", + props: { + appendText: + "Add Standard", + }, fields: [ { rhf: "Input", - label: "Household Size", + label: "Household size", + labelClassName: + "font-bold", name: "house-size", props: { placeholder: @@ -525,7 +538,9 @@ export const v202402: FormSchema = { { rhf: "Input", name: "standard", - label: "Standard ($)", + label: "Standard", + labelClassName: + "font-bold", props: { className: "w-[200px]", @@ -558,6 +573,8 @@ export const v202402: FormSchema = { { label: "There is an additional incremental amount.", + optionlabelClassName: + "font-bold", value: "yes", form: [ { @@ -565,7 +582,9 @@ export const v202402: FormSchema = { { rhf: "Input", label: - "Incremental amount ($)", + "Incremental amount", + labelClassName: + "font-bold", name: "increment-amount", props: { icon: "$", @@ -610,7 +629,7 @@ export const v202402: FormSchema = { { rhf: "Input", name: "name-of-region", - label: "Region Name", + label: "Region name", labelClassName: "font-bold", rules: { @@ -627,7 +646,9 @@ export const v202402: FormSchema = { { rhf: "Textarea", name: "region-descript", - label: "Description", + label: "Describe", + labelClassName: + "font-bold", rules: { required: "* Required", @@ -650,7 +671,9 @@ export const v202402: FormSchema = { { rhf: "Input", label: - "Household Size", + "Household size", + labelClassName: + "font-bold", name: "house-size", props: { placeholder: @@ -672,8 +695,9 @@ export const v202402: FormSchema = { { rhf: "Input", name: "standard", - label: - "Standard ($)", + label: "Standard", + labelClassName: + "font-bold", props: { className: "w-[200px]", @@ -702,6 +726,8 @@ export const v202402: FormSchema = { { label: "There is an additional incremental amount.", + optionlabelClassName: + "font-bold", value: "yes", form: [ { @@ -709,7 +735,9 @@ export const v202402: FormSchema = { { rhf: "Input", label: - "Incremental amount ($)", + "Incremental amount", + labelClassName: + "font-bold", name: "increment-amount", props: { icon: "$", @@ -762,6 +790,8 @@ export const v202402: FormSchema = { name: "name-of-liv-arrange", label: "Name of living arrangement", + labelClassName: + "font-bold", rules: { required: "* Required", @@ -776,7 +806,9 @@ export const v202402: FormSchema = { { rhf: "Textarea", name: "liv-arrange-descript", - label: "Description", + label: "Describe", + labelClassName: + "font-bold", rules: { required: "* Required", @@ -799,7 +831,9 @@ export const v202402: FormSchema = { { rhf: "Input", label: - "Household Size", + "Household size", + labelClassName: + "font-bold", name: "house-size", props: { placeholder: @@ -821,8 +855,9 @@ export const v202402: FormSchema = { { rhf: "Input", name: "standard", - label: - "Standard ($)", + label: "Standard", + labelClassName: + "font-bold", props: { className: "w-[200px]", @@ -851,6 +886,8 @@ export const v202402: FormSchema = { { label: "There is an additional incremental amount.", + optionlabelClassName: + "font-bold", value: "yes", form: [ { @@ -858,7 +895,9 @@ export const v202402: FormSchema = { { rhf: "Input", label: - "Incremental amount ($)", + "Incremental amount", + labelClassName: + "font-bold", name: "incremental_amount", props: { icon: "$", @@ -901,15 +940,17 @@ export const v202402: FormSchema = { name: "add-some-other-way", props: { appendText: - "Add some other way", + "Add other way", removeText: - "Remove some other way", + "Remove other way", }, fields: [ { rhf: "Input", name: "name-of-group", label: "Name", + labelClassName: + "font-bold", rules: { required: "* Required", @@ -924,7 +965,9 @@ export const v202402: FormSchema = { { rhf: "Textarea", name: "group-descript", - label: "Description", + label: "Describe", + labelClassName: + "font-bold", rules: { required: "* Required", @@ -947,7 +990,9 @@ export const v202402: FormSchema = { { rhf: "Input", label: - "Household Size", + "Household size", + labelClassName: + "font-bold", name: "house-size", props: { placeholder: @@ -969,8 +1014,9 @@ export const v202402: FormSchema = { { rhf: "Input", name: "standard", - label: - "Standard ($)", + label: "Standard", + labelClassName: + "font-bold", props: { className: "w-[200px]", @@ -999,6 +1045,8 @@ export const v202402: FormSchema = { { label: "There is an additional incremental amount.", + optionlabelClassName: + "font-bold", value: "yes", form: [ { @@ -1006,7 +1054,9 @@ export const v202402: FormSchema = { { rhf: "Input", label: - "Incremental amount ($)", + "Incremental amount", + labelClassName: + "font-bold", name: "increment-amount", props: { icon: "$", @@ -1111,6 +1161,7 @@ export const v202402: FormSchema = { rhf: "Textarea", name: "other_descript", label: "Describe", + labelClassName: "font-bold", rules: { required: "* Required", pattern: { @@ -1135,6 +1186,7 @@ export const v202402: FormSchema = { rhf: "Textarea", name: "other_target_criteria_descript", label: "Describe", + labelClassName: "font-bold", rules: { required: "* Required", pattern: { diff --git a/src/services/api/webforms/ABP10/v202401.ts b/src/services/api/webforms/ABP10/v202401.ts index aa58a8b35..beed05e60 100644 --- a/src/services/api/webforms/ABP10/v202401.ts +++ b/src/services/api/webforms/ABP10/v202401.ts @@ -46,7 +46,7 @@ export const v202401: FormSchema = { rhf: "Textarea", label: "Describe the approach", labelClassName: "font-bold", - name: "describe-approach", + name: "approach-description", formItemClassName: "ml-[0.6rem] px-4 my-2 border-l-4 border-l-primary", rules: { diff --git a/src/services/api/webforms/ABP2B/v202401.ts b/src/services/api/webforms/ABP2B/v202401.ts index 635c8a90a..b81a3aedf 100644 --- a/src/services/api/webforms/ABP2B/v202401.ts +++ b/src/services/api/webforms/ABP2B/v202401.ts @@ -192,7 +192,7 @@ export const v202401: FormSchema = { { text: "The state/territory assures it will document in the exempt individual's eligibility file that the individual:", type: "default", - classname: "block py-1 font-bold", + classname: "block py-1", }, { text: "A. Was informed in accordance with this section prior to enrollment", diff --git a/src/services/api/webforms/ABP2C/v202401.ts b/src/services/api/webforms/ABP2C/v202401.ts index 5671b9acc..1b89574d3 100644 --- a/src/services/api/webforms/ABP2C/v202401.ts +++ b/src/services/api/webforms/ABP2C/v202401.ts @@ -27,8 +27,6 @@ export const v202401: FormSchema = { props: { options: [ { - label: - "The state/territory assures it will appropriately identify any individuals in the eligibility groups who:", value: "assure_individuals_in_egroup_exempt_section_1937", styledLabel: [ { diff --git a/src/services/api/webforms/ABP3/v202401.ts b/src/services/api/webforms/ABP3/v202401.ts index 5fbec14ed..a30cd9fc6 100644 --- a/src/services/api/webforms/ABP3/v202401.ts +++ b/src/services/api/webforms/ABP3/v202401.ts @@ -88,6 +88,7 @@ export const v202401: FormSchema = { { rhf: "Input", label: "Plan name", + labelClassName: "font-bold", name: "state-employee-coverage-plan-name", rules: { required: "* Required", @@ -112,6 +113,7 @@ export const v202401: FormSchema = { { rhf: "Input", label: "Plan name", + labelClassName: "font-bold", name: "commercial-hmo", rules: { required: "* Required", @@ -262,6 +264,7 @@ export const v202401: FormSchema = { rhf: "Input", name: "state-employee-coverage-plan-name", label: "Plan name", + labelClassName: "font-bold", rules: { required: "* Required", pattern: { @@ -286,6 +289,7 @@ export const v202401: FormSchema = { rhf: "Input", name: "commercial-hmo-plan-name", label: "Plan name", + labelClassName: "font-bold", rules: { required: "* Required", pattern: { @@ -324,11 +328,13 @@ export const v202401: FormSchema = { { description: "The state/territory must select a base benchmark plan as the basis for providing essential health benefits in its benchmark or benchmark-equivalent package.", + descriptionClassName: "font-normal", slots: [ { rhf: "Select", label: "Is the base benchmark plan the same as the Section 1937 coverage option?", + labelClassName: "font-bold", name: "same-as-sect-1937", rules: { required: "* Required" }, props: { @@ -373,6 +379,7 @@ export const v202401: FormSchema = { { rhf: "Input", label: "Plan name", + labelClassName: "font-bold", name: "name", rules: { required: "* Required", diff --git a/src/services/api/webforms/ABP3_1/v202401.ts b/src/services/api/webforms/ABP3_1/v202401.ts index 39c7149fb..bc68c156d 100644 --- a/src/services/api/webforms/ABP3_1/v202401.ts +++ b/src/services/api/webforms/ABP3_1/v202401.ts @@ -96,6 +96,7 @@ export const v202401: FormSchema = { rhf: "Input", name: "state-territory-bench-plan-name", label: "Plan name", + labelClassName: "font-bold", rules: { required: "* Required", pattern: { @@ -116,6 +117,7 @@ export const v202401: FormSchema = { rhf: "Input", name: "bench-hmo-plan-name", label: "Plan name", + labelClassName: "font-bold", rules: { required: "* Required", pattern: { @@ -258,6 +260,7 @@ export const v202401: FormSchema = { rhf: "Input", name: "bench-equivalent-state-coverage-plan-name", label: "Plan name", + labelClassName: "font-bold", rules: { required: "* Required", pattern: { @@ -278,6 +281,7 @@ export const v202401: FormSchema = { rhf: "Input", name: "bench-equivalent-hmo-plan-name", label: "Plan name", + labelClassName: "font-bold", rules: { required: "* Required", pattern: { @@ -316,6 +320,7 @@ export const v202401: FormSchema = { { description: "The state or territory must select an EHB-benchmark plan as the basis for providing essential health benefits in its benchmark or benchmark-equivalent package.", + descriptionClassName: "text-base", slots: [ { name: "plan-name", @@ -360,6 +365,16 @@ export const v202401: FormSchema = { rules: { required: "* Required", }, + dependency: { + conditions: [ + { + name: "abp3-1_select-of-ehb-bench-plan_is-ehb-bench-plan-same-section-1937", + type: "expectedValue", + expectedValue: "no", + }, + ], + effect: { type: "show" }, + }, props: { options: [ { @@ -376,7 +391,7 @@ export const v202401: FormSchema = { rhf: "Select", name: "is-geo-area", label: "State/territory", - labelClassName: "p-3", + labelClassName: "mt-3 pr-4 font-bold", formItemClassName: "flex-row", props: { className: "w-[150px]", @@ -1752,6 +1767,16 @@ export const v202401: FormSchema = { { title: "Assurances", sectionId: "assurances", + dependency: { + conditions: [ + { + name: "abp3-1_select-of-ehb-bench-plan_is-ehb-bench-plan-same-section-1937", + type: "expectedValue", + expectedValue: "no", + }, + ], + effect: { type: "show" }, + }, form: [ { slots: [ diff --git a/src/services/api/webforms/ABP9/v202401.ts b/src/services/api/webforms/ABP9/v202401.ts index 57c1eff9e..779bffaa4 100644 --- a/src/services/api/webforms/ABP9/v202401.ts +++ b/src/services/api/webforms/ABP9/v202401.ts @@ -54,7 +54,7 @@ export const v202401: FormSchema = { { rhf: "Select", - name: "abp9_employee-sponsored-insurance-or-pay_does-provide-pay-of-premiums", + name: "does-provide-pay-of-premiums", label: "Does the state/territory otherwise provide for payment of premiums?", labelClassName: "font-bold", @@ -85,7 +85,7 @@ export const v202401: FormSchema = { dependency: { conditions: [ { - name: "abp9_employee-sponsored-insurance-or-pay_does-provide-pay-of-premiums", + name: "abp9_employee-sponsored-insur-or-pay_does-provide-pay-of-premiums", type: "expectedValue", expectedValue: "yes", }, diff --git a/src/services/ui/src/components/Inputs/checkbox.tsx b/src/services/ui/src/components/Inputs/checkbox.tsx index d5707e69a..28e17b329 100644 --- a/src/services/ui/src/components/Inputs/checkbox.tsx +++ b/src/services/ui/src/components/Inputs/checkbox.tsx @@ -37,7 +37,7 @@ const Checkbox = React.forwardRef<