VACMS-19512: Drupal UX for phone numbers (#19607)

* Update staff profile & vamc b&i * VAMC facility mental health * fix truncated confirmation message * reverting previous change & removing empty fieldset * finish reverting SCSS change * SCSS updates to phone number paragraph * adding ids for specificity * what about twig * Rolling back CSS and Twig. Adding fieldset wrapping * VACMS-19512: Updates SCSS for clarity and DS alignment * VACMS-19512: Updates test for phone widget --------- Co-authored-by: Christian Burk <[email protected]>
department-of-veterans-affairs · Dec 10, 2024 · 8a3434f · 8a3434f
1 parent 0df45e1
commit 8a3434f
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 88 deletions.
diff --git a/config/sync/core.entity_form_display.node.health_care_local_facility.default.yml b/config/sync/core.entity_form_display.node.health_care_local_facility.default.yml
@@ -159,7 +159,6 @@ third_party_settings:
     group_locations_and_contact_info:
       children:
         - group_facility_data_from_vast
-        - field_mental_health_phone
       label: 'Locations and contact information'
       region: content
       parent_name: ''
@@ -219,6 +218,23 @@ third_party_settings:
         effect: none
         speed: fast
         required_fields: false
+    group_mental_health_phone_number:
+      children:
+        - field_mental_health_phone
+        - field_telephone
+      label: 'Mental health phone number'
+      region: content
+      parent_name: ''
+      weight: 2
+      format_type: fieldset
+      format_settings:
+        classes: ''
+        show_empty_fields: true
+        id: ''
+        label_as_html: false
+        description: 'Enter the number Veterans should call to access mental health services at your facility. If your facility doesn''t offer these services, enter the most appropriate system number. This number will be displayed everywhere your facility appears across VA.gov. <a href="/help/va-medical-centers-vamcs/about-locations-content-for-vamcs/how-to-edit-a-vamc-facility"  target="_blank">View guidelines for editing VAMC facilities (opens in a new tab)</a>'
+        required_fields: true
+        description_display: after
 id: node.health_care_local_facility.default
 targetEntityType: node
 bundle: health_care_local_facility
@@ -307,7 +323,7 @@ content:
     third_party_settings: {  }
   field_main_location:
     type: boolean_checkbox
-    weight: 22
+    weight: 21
     region: content
     settings:
       display_label: true
@@ -374,31 +390,17 @@ content:
     settings: {  }
     third_party_settings: {  }
   field_telephone:
-    type: paragraphs
-    weight: 1
+    type: entity_reference_paragraphs
+    weight: 22
     region: content
     settings:
-      title: Paragraph
-      title_plural: Paragraphs
+      title: 'phone number'
+      title_plural: 'phone number'
       edit_mode: open
-      closed_mode: summary
-      autocollapse: none
-      closed_mode_threshold: 0
-      add_mode: dropdown
+      add_mode: button
       form_display_mode: default
       default_paragraph_type: phone_number
-      features:
-        add_above: '0'
-        collapse_edit_all: collapse_edit_all
-        convert: '0'
-        duplicate: duplicate
-    third_party_settings:
-      paragraphs_features:
-        add_in_between: false
-        add_in_between_link_count: 3
-        delete_confirmation: false
-        show_drag_and_drop: true
-        show_collapse_all: true
+    third_party_settings: {  }
   field_timezone:
     type: tzfield_default
     weight: 30

diff --git a/config/sync/core.entity_form_display.node.person_profile.default.yml b/config/sync/core.entity_form_display.node.person_profile.default.yml
@@ -40,7 +40,7 @@ third_party_settings:
       label: 'Section settings'
       region: content
       parent_name: ''
-      weight: 8
+      weight: 9
       format_type: details_sidebar
       format_settings:
         classes: ''
@@ -71,7 +71,7 @@ third_party_settings:
       label: Name
       region: content
       parent_name: ''
-      weight: 2
+      weight: 3
       format_type: fieldset
       format_settings:
         classes: ''
@@ -81,12 +81,11 @@ third_party_settings:
     group_contact_info:
       children:
         - field_email_address
-        - field_phone_number
-        - field_telephone
+        - group_phone_number
       label: 'Contact info'
       region: content
       parent_name: ''
-      weight: 3
+      weight: 4
       format_type: fieldset
       format_settings:
         classes: ''
@@ -100,7 +99,7 @@ third_party_settings:
       label: Photo
       region: content
       parent_name: ''
-      weight: 4
+      weight: 5
       format_type: fieldset
       format_settings:
         classes: ''
@@ -117,7 +116,7 @@ third_party_settings:
       label: Bio
       region: content
       parent_name: ''
-      weight: 5
+      weight: 6
       format_type: fieldset
       format_settings:
         classes: ''
@@ -137,6 +136,23 @@ third_party_settings:
         id: ''
         description: ''
         required_fields: true
+    group_phone_number:
+      children:
+        - field_phone_number
+        - field_telephone
+      label: 'Phone number'
+      region: content
+      parent_name: group_contact_info
+      weight: 6
+      format_type: fieldset
+      format_settings:
+        classes: ''
+        show_empty_fields: false
+        id: ''
+        label_as_html: false
+        description: ''
+        required_fields: true
+        description_display: after
 id: node.person_profile.default
 targetEntityType: node
 bundle: person_profile
@@ -150,29 +166,29 @@ content:
     third_party_settings: {  }
   field_body:
     type: text_textarea
-    weight: 13
+    weight: 17
     region: content
     settings:
       rows: 5
       placeholder: ''
     third_party_settings: {  }
   field_complete_biography:
     type: file_generic
-    weight: 14
+    weight: 18
     region: content
     settings:
       progress_indicator: throbber
     third_party_settings: {  }
   field_complete_biography_create:
     type: boolean_checkbox
-    weight: 11
+    weight: 15
     region: content
     settings:
       display_label: true
     third_party_settings: {  }
   field_description:
     type: string_textfield
-    weight: 6
+    weight: 7
     region: content
     settings:
       size: 60
@@ -188,7 +204,7 @@ content:
     third_party_settings: {  }
   field_intro_text:
     type: string_textarea_with_counter
-    weight: 12
+    weight: 16
     region: content
     settings:
       rows: 5
@@ -231,13 +247,13 @@ content:
     third_party_settings: {  }
   field_office:
     type: options_select
-    weight: 1
+    weight: 2
     region: content
     settings: {  }
     third_party_settings: {  }
   field_phone_number:
     type: telephone_default
-    weight: 6
+    weight: 7
     region: content
     settings:
       placeholder: ''
@@ -251,39 +267,33 @@ content:
     third_party_settings: {  }
   field_suffix:
     type: string_textfield
-    weight: 5
+    weight: 6
     region: content
     settings:
       size: 60
       placeholder: ''
     third_party_settings: {  }
   field_telephone:
-    type: paragraphs
-    weight: 7
+    type: entity_reference_paragraphs
+    weight: 8
     region: content
     settings:
-      title: Paragraph
-      title_plural: Paragraphs
+      title: 'phone number'
+      title_plural: 'phone numbers'
       edit_mode: open
-      closed_mode: summary
-      autocollapse: none
-      closed_mode_threshold: 0
-      add_mode: dropdown
+      add_mode: button
       form_display_mode: default
-      default_paragraph_type: ''
-      features:
-        collapse_edit_all: collapse_edit_all
-        duplicate: duplicate
+      default_paragraph_type: _none
     third_party_settings: {  }
   moderation_state:
     type: moderation_state_default
-    weight: 13
+    weight: 12
     region: content
     settings: {  }
     third_party_settings: {  }
   path:
     type: path
-    weight: 6
+    weight: 7
     region: content
     settings: {  }
     third_party_settings: {  }
@@ -296,7 +306,7 @@ content:
       placeholder: ''
     third_party_settings: {  }
   url_redirects:
-    weight: 7
+    weight: 8
     region: content
     settings: {  }
     third_party_settings: {  }

diff --git a/config/sync/core.entity_form_display.node.vamc_system_billing_insurance.default.yml b/config/sync/core.entity_form_display.node.vamc_system_billing_insurance.default.yml
@@ -90,7 +90,7 @@ third_party_settings:
       label: 'National top of page content'
       region: content
       parent_name: ''
-      weight: 6
+      weight: 7
       format_type: tooltip
       format_settings:
         show_label: '0'
@@ -105,13 +105,12 @@ third_party_settings:
         attributes: ''
     group_inquiries_about_copay:
       children:
-        - field_phone_number
-        - field_telephone
+        - group_phone_number
         - field_office_hours
       label: 'For inquiries by phone about copay balance'
       region: content
       parent_name: ''
-      weight: 5
+      weight: 6
       format_type: details
       format_settings:
         classes: ''
@@ -121,20 +120,6 @@ third_party_settings:
         description: ''
         required_fields: false
         formatter: closed
-    group_cashier_s_office:
-      children: {  }
-      label: "Cashier's office"
-      region: content
-      parent_name: ''
-      weight: 7
-      format_type: details
-      format_settings:
-        classes: ''
-        show_empty_fields: true
-        id: ''
-        open: true
-        description: ''
-        required_fields: false
     group_national_above_top_of_page:
       children:
         - field_cc_above_top_of_page
@@ -154,6 +139,23 @@ third_party_settings:
         element: div
         label_element: h3
         attributes: ''
+    group_phone_number:
+      children:
+        - field_phone_number
+        - field_telephone
+      label: 'Phone number'
+      region: content
+      parent_name: group_inquiries_about_copay
+      weight: 5
+      format_type: fieldset
+      format_settings:
+        classes: ''
+        show_empty_fields: false
+        id: ''
+        label_as_html: false
+        description: ''
+        required_fields: true
+        description_display: after
 id: node.vamc_system_billing_insurance.default
 targetEntityType: node
 bundle: vamc_system_billing_insurance
@@ -235,39 +237,33 @@ content:
     third_party_settings: {  }
   field_office_hours:
     type: office_hours_default
-    weight: 10
+    weight: 6
     region: content
     settings:
       collapsed: false
     third_party_settings: {  }
   field_phone_number:
     type: telephone_default
-    weight: 8
+    weight: 10
     region: content
     settings:
       placeholder: ''
     third_party_settings: {  }
   field_telephone:
-    type: paragraphs
-    weight: 9
+    type: entity_reference_paragraphs
+    weight: 11
     region: content
     settings:
-      title: Paragraph
-      title_plural: Paragraphs
+      title: 'phone number'
+      title_plural: 'phone numbers'
       edit_mode: open
-      closed_mode: summary
-      autocollapse: none
-      closed_mode_threshold: 0
-      add_mode: dropdown
+      add_mode: button
       form_display_mode: default
-      default_paragraph_type: ''
-      features:
-        collapse_edit_all: collapse_edit_all
-        duplicate: duplicate
+      default_paragraph_type: phone_number
     third_party_settings: {  }
   moderation_state:
     type: moderation_state_default
-    weight: 7
+    weight: 12
     region: content
     settings: {  }
     third_party_settings: {  }

diff --git a/config/sync/field.field.node.health_care_local_facility.field_mental_health_phone.yml b/config/sync/field.field.node.health_care_local_facility.field_mental_health_phone.yml
@@ -16,7 +16,7 @@ field_name: field_mental_health_phone
 entity_type: node
 bundle: health_care_local_facility
 label: 'Mental health phone number'
-description: 'Enter the number Veterans should call to access mental health services at your facility, for example 202-555-1234, ext. 23. If your facility doesn''t offer these services, enter the most appropriate system number. This number will be displayed everywhere your facility appears across VA.gov. <a href="/help/va-medical-centers-vamcs/about-locations-content-for-vamcs/how-to-edit-a-vamc-facility"  target="_blank">View guidelines for editing VAMC facilities (opens in a new tab)</a>'
+description: ''
 required: false
 translatable: false
 default_value: {  }