[UNO-780] Title and text fields for the donors paragraph type

config/core.entity_form_display.paragraph.donors.default.yml

@@ -6,55 +6,74 @@ dependencies:
     - field.field.paragraph.donors.field_country_donors
     - field.field.paragraph.donors.field_figures_footnote
     - field.field.paragraph.donors.field_presence_donors
+    - field.field.paragraph.donors.field_text
+    - field.field.paragraph.donors.field_title
     - field.field.paragraph.donors.field_url
     - paragraphs.paragraphs_type.donors
   module:
     - link
     - ocha_key_figures
+    - text
 id: paragraph.donors.default
 targetEntityType: paragraph
 bundle: donors
 mode: default
 content:
   field_country_donors:
     type: key_figure
-    weight: 0
+    weight: 2
     region: content
     settings:
       allow_manual: 'no'
     third_party_settings: {  }
   field_figures_footnote:
     type: string_textarea
-    weight: 3
+    weight: 5
     region: content
     settings:
       rows: 5
       placeholder: ''
     third_party_settings: {  }
   field_presence_donors:
     type: key_figure_presence
-    weight: 1
+    weight: 3
     region: content
     settings:
       allow_manual: 'no'
     third_party_settings: {  }
+  field_text:
+    type: text_textarea
+    weight: 1
+    region: content
+    settings:
+      rows: 5
+      placeholder: ''
+    third_party_settings: {  }
+  field_title:
+    type: string_textfield
+    weight: 0
+    region: content
+    settings:
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
   field_url:
     type: link_default
-    weight: 2
+    weight: 4
     region: content
     settings:
       placeholder_url: ''
       placeholder_title: ''
     third_party_settings: {  }
   status:
     type: boolean_checkbox
-    weight: 5
+    weight: 7
     region: content
     settings:
       display_label: true
     third_party_settings: {  }
   translation:
-    weight: 4
+    weight: 6
     region: content
     settings: {  }
     third_party_settings: {  }

config/core.entity_view_display.paragraph.donors.default.yml

@@ -6,10 +6,13 @@ dependencies:
     - field.field.paragraph.donors.field_country_donors
     - field.field.paragraph.donors.field_figures_footnote
     - field.field.paragraph.donors.field_presence_donors
+    - field.field.paragraph.donors.field_text
+    - field.field.paragraph.donors.field_title
     - field.field.paragraph.donors.field_url
     - paragraphs.paragraphs_type.donors
   module:
     - link
+    - text
     - unocha_donors
 id: paragraph.donors.default
 targetEntityType: paragraph
@@ -25,14 +28,14 @@ content:
       currency_symbol: 'yes'
       percentage: 'yes'
     third_party_settings: {  }
-    weight: 0
+    weight: 2
     region: content
   field_figures_footnote:
     type: basic_string
     label: hidden
     settings: {  }
     third_party_settings: {  }
-    weight: 2
+    weight: 4
     region: content
   field_presence_donors:
     type: unocha_donors
@@ -43,8 +46,23 @@ content:
       currency_symbol: 'yes'
       percentage: 'yes'
     third_party_settings: {  }
+    weight: 3
+    region: content
+  field_text:
+    type: text_default
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
     weight: 1
     region: content
+  field_title:
+    type: string
+    label: hidden
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    weight: 0
+    region: content
   field_url:
     type: link
     label: hidden
@@ -55,6 +73,6 @@ content:
       rel: ''
       target: ''
     third_party_settings: {  }
-    weight: 3
+    weight: 5
     region: content
 hidden: {  }

config/core.entity_view_display.paragraph.donors.preview.yml

@@ -7,11 +7,14 @@ dependencies:
     - field.field.paragraph.donors.field_country_donors
     - field.field.paragraph.donors.field_figures_footnote
     - field.field.paragraph.donors.field_presence_donors
+    - field.field.paragraph.donors.field_text
+    - field.field.paragraph.donors.field_title
     - field.field.paragraph.donors.field_url
     - paragraphs.paragraphs_type.donors
   module:
     - layout_builder
     - link
+    - text
     - unocha_donors
 third_party_settings:
   layout_builder:
@@ -31,14 +34,14 @@ content:
       currency_symbol: 'yes'
       percentage: 'yes'
     third_party_settings: {  }
-    weight: 0
+    weight: 2
     region: content
   field_figures_footnote:
     type: basic_string
     label: above
     settings: {  }
     third_party_settings: {  }
-    weight: 2
+    weight: 4
     region: content
   field_presence_donors:
     type: unocha_donors
@@ -49,8 +52,23 @@ content:
       currency_symbol: 'yes'
       percentage: 'yes'
     third_party_settings: {  }
+    weight: 3
+    region: content
+  field_text:
+    type: text_default
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
     weight: 1
     region: content
+  field_title:
+    type: string
+    label: hidden
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    weight: 0
+    region: content
   field_url:
     type: link
     label: above
@@ -61,6 +79,6 @@ content:
       rel: ''
       target: ''
     third_party_settings: {  }
-    weight: 3
+    weight: 5
     region: content
 hidden: {  }

config/field.field.paragraph.donors.field_text.yml

@@ -0,0 +1,27 @@
+uuid: c956a0e3-26e3-4e90-a6a8-d7b88551aaa0
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_text
+    - paragraphs.paragraphs_type.donors
+  module:
+    - allowed_formats
+    - text
+third_party_settings:
+  allowed_formats:
+    allowed_formats:
+      - ckeditor
+id: paragraph.donors.field_text
+field_name: field_text
+entity_type: paragraph
+bundle: donors
+label: Text
+description: 'Use the "@year" placeholder in the text to have it replaced by the current year (ex: "Some text @year and some other text.") when displayed.'
+required: false
+translatable: true
+default_value: {  }
+default_value_callback: ''
+settings:
+  allowed_formats: {  }
+field_type: text_long

config/field.field.paragraph.donors.field_title.yml

@@ -0,0 +1,19 @@
+uuid: fe1f05aa-76ee-4925-989d-934d288cd387
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_title
+    - paragraphs.paragraphs_type.donors
+id: paragraph.donors.field_title
+field_name: field_title
+entity_type: paragraph
+bundle: donors
+label: Title
+description: 'Use the "@year" placeholder in the title to have it replaced by the current year (ex: "Funding in @year") when displayed.'
+required: false
+translatable: true
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: string

html/modules/custom/unocha_donors/src/Plugin/Field/FieldFormatter/Donors.php

@@ -86,12 +86,14 @@ public function viewElements(FieldItemListInterface $items, $langcode) {
           '#theme' => 'unocha_donors_list__' . $type . '__' . $view_mode,
           '#id' => Html::getUniqueId($type . '-' . $items->getEntity()->id() . '-' . $delta),
           '#type' => $type,
-          '#title' => $item->getFigureLabel() ?: $this->t('Top donors'),
+          // The title is handled in the template.
+          '#title' => '',
           '#year' => $data['year'] ?? NULL,
           '#list' => $donors,
           '#format' => $format,
           '#precision' => $precision,
           '#currency_symbol' => $currency_symbol,
+          '#item' => $item,
           '#cache' => [
             'max-age' => $this->ochaKeyFiguresApiClient->getMaxAge(),
             'tags' => $this->ochaKeyFiguresApiClient->getCacheTags([

html/modules/custom/unocha_donors/templates/unocha-donors-list.html.twig

@@ -11,18 +11,25 @@
  * - level: heading level for the title
  * - title: list's title
  * - title_attributes: title attributes
+ * - description: list's description
+ * - description_attributes: description attributes
  * - year: the year of the data
  * - list: list of donors/sectors with name and optional pledged/paid amounts
  * - list_attributes: attributes for the list
  * - item_attributes: attributes for the list items
  * - format: number format
  * - precision: number format precision
+ * - item: KeyFigure or KeyFigurePresence item
  */
 
 #}
 {% if list is not empty %}
+{% set title = title ?: (item.getFigureLabel() ? '@label (@provider)'|t({'@label': item.getFigureLabel(), '@provider': item.getFigureProvider()|upper}) : 'Top donors'|t) %}
 <section{{ attributes.addClass('uno-donors', 'uno-donors--' ~ type|clean_class).setAttribute('id', id) }}>
   <h{{ level }}{{ title_attributes.addClass('uno-donors__title') }}>{{ title }}</h{{ level }}>
+  {% if description %}
+    <div{{ description_attributes.addClass('uno-donors__description') }}>{{ description }}</div>
+  {% endif %}
   <ul{{ list_attributes.addClass('uno-donors__list') }}>
     {% for item in list %}
     <li{{ item_attributes.addClass('uno-donors__list__item') }}>{{ item.name }}</li>

html/modules/custom/unocha_donors/unocha_donors.module

@@ -25,6 +25,10 @@ function unocha_donors_theme() {
         'title' => NULL,
         // Title attributes.
         'title_attributes' => NULL,
+        // Description.
+        'description' => NULL,
+        // Description attributes.
+        'description_attributes' => NULL,
         // The year of the data.
         'year' => NULL,
         // List of donors/sectors with name and optional pledged/paid amounts.
@@ -37,6 +41,8 @@ function unocha_donors_theme() {
         'format' => NULL,
         // Number format precision.
         'precision' => NULL,
+        // KeyFigure or KeyFigurePresence item.
+        'item' => NULL,
       ],
     ],
   ];

html/themes/custom/common_design_claro/css/styles.css

@@ -54,7 +54,7 @@
 }
 
 /* Matches .cd-block-title */
-.field--name-field-title {
+.field--name-field-title:not(.form-wrapper) {
   margin: 0 0 1rem 0;
   margin-top: 0;
   margin-bottom: 1rem;
@@ -114,6 +114,11 @@ blockquote::before {
   content: none;
 }
 
+/* Prevent excessive spacing between text widget and description. */
+.field--widget-text-textarea .filter-wrapper {
+  float: right;
+}
+
 /**
  * Style adjustments for the preview of the paragraphs.
  */

html/themes/custom/common_design_subtheme/components/uno-donors/uno-donors.css

@@ -266,3 +266,17 @@ ul.uno-donors__list--with-figures .uno-donors__amount {
 .uno-donors--oct-top-donors .uno-donors__donor {
   padding: 0;
 }
+
+.node--view-mode-full .paragraph .field--name-field-text,
+p.uno-donors__description {
+  margin: 1rem 0;
+}
+
+@media (min-width: 768px) {
+  /* When content.field_text has content, remove the padding for consistent
+    vertical rhythm.
+  */
+  .field--name-field-text + .field--name-field-country-donors .uno-donors {
+    padding-top: 0;
+  }
+}

html/themes/custom/common_design_subtheme/templates/modules/unocha_donors/unocha-donors-list--cbpf-top-donors.html.twig

@@ -11,21 +11,27 @@
  * - level: heading level for the title
  * - title: list's title
  * - title_attributes: title attributes
+ * - description: list's description
+ * - description_attributes: description attributes
  * - year: the year of the data
  * - list: list of donors/sectors with name and optional pledged/paid amounts
  * - list_attributes: attributes for the list
  * - item_attributes: attributes for the list items
  * - format: number format
  * - precision: number format precision
+ * - item: KeyFigure or KeyFigurePresence item
  */
 
 #}
 {% if list is not empty %}
 {{ attach_library('common_design_subtheme/uno-donors') }}
-{% set title = 'Top 5 donors'|t %}
+{% set title = title ?: 'Top 5 donors'|t %}
 <section{{ attributes.addClass('uno-donors', 'uno-donors--' ~ type|clean_class).setAttribute('id', id) }}>
   <header class="uno-donors__header">
     <h{{ level }}{{ title_attributes.addClass('uno-donors__title') }}>{{ title }}</h{{ level }}>
+    {% if description %}
+      <div{{ description_attributes.addClass('uno-donors__description') }}>{{ description }}</div>
+    {% endif %}
   </header>
   {% apply spaceless %}
   <dl{{ list_attributes.addClass('uno-donors__list', 'uno-donors__list--with-figures') }}>