EWPP-2016: Improve display of person teaser.

modules/oe_theme_content_person/oe_theme_content_person.module

@@ -10,6 +10,20 @@ declare(strict_types = 1);
 use Drupal\Core\Entity\Display\EntityViewDisplayInterface;
 use Drupal\Core\Entity\EntityInterface;
 
+/**
+ * Implements hook_theme().
+ */
+function oe_theme_content_person_theme(): array {
+  return [
+    'oe_theme_content_person_job_list' => [
+      'variables' => [
+        'simple' => TRUE,
+        'items' => [],
+      ],
+    ],
+  ];
+}
+
 /**
  * Implements hook_preprocess_HOOK().
  *

modules/oe_theme_content_person/src/Plugin/ExtraField/Display/PersonJobListExtraField.php

@@ -91,39 +91,45 @@ public function viewElements(ContentEntityInterface $entity) {
       return [];
     }
 
-    $pattern = [
-      '#type' => 'pattern',
-      '#id' => 'field_list',
-      '#variant' => 'horizontal',
-      '#fields' => [
-        'items' => [],
-      ],
-    ];
-
-    $cacheable_metadata = CacheableMetadata::createFromRenderArray($pattern);
+    $cacheable_metadata = new CacheableMetadata();
     $cacheable_metadata->addCacheableDependency($entity);
-
+    $job_list = [
+      '#theme' => 'oe_theme_content_person_job_list',
+      '#items' => [],
+    ];
     // Prepare person jobs to be shown in the field list pattern.
     $view_builder = $this->entityTypeManager->getViewBuilder('oe_person_job');
     foreach ($entity->get('oe_person_jobs')->referencedEntities() as $person_job) {
       // Retrieve the translation of the person job entity.
       $person_job = $this->entityRepository->getTranslationFromContext($person_job);
 
-      // Body has to be filled with at least empty space. Otherwise whole line
-      // will be hidden.
-      $body = ' ';
+      $body = '';
       if (!$person_job->get('oe_description')->isEmpty()) {
         $body = $view_builder->viewField($person_job->get('oe_description'), [
           'label' => 'hidden',
         ]);
+        $job_list['#simple'] = FALSE;
       }
-      $pattern['#fields']['items'][] = [
+      $job_list['#items'][] = [
         'label' => $person_job->label(),
         'body' => $body,
       ];
       $cacheable_metadata->addCacheableDependency($person_job);
     }
 
+    $pattern = [
+      '#type' => 'pattern',
+      '#id' => 'field_list',
+      '#variant' => 'horizontal',
+      '#fields' => [
+        'items' => [
+          [
+            'label' => $this->t('Responsibilities'),
+            'body' => $job_list,
+          ],
+        ],
+      ],
+    ];
     $cacheable_metadata->applyTo($pattern);
     return $pattern;
   }

modules/oe_theme_content_person/templates/oe-theme-content-person-job-list.html.twig

@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Theme template for Person job list extra field.
+ *
+ * @see \Drupal\oe_theme_content_person\Plugin\ExtraField\Display\PersonJobListExtraField::viewElements()
+ */
+#}
+{% if simple %}
+  <ul class="ecl-unordered-list">
+    {% for item in items %}
+      <li class="ecl-unordered-list__item">
+        {{ item.label}}
+      </li>
+    {% endfor %}
+  </ul>
+{% else %}
+  {% for item in items %}
+    <div class="ecl-u-type-m ecl-u-type-bold ecl-u-mb-xs">{{ item.label }}</div>
+    {% if item.body %}
+      <div class="ecl-u-mb-xs">{{ item.body }}</div>
+    {% endif %}
+  {% endfor %}
+{% endif %}
+

sass/compositions/_content_item.scss

@@ -5,6 +5,7 @@
 .ecl-content-item {
   &__meta {
     text-transform: uppercase;
+    line-height: 1.25rem!important;
   }
   &__description {
     p {
@@ -18,7 +19,7 @@
   a {
     color: map.get(theme.$color, 'blue-100');
     font-weight: map.get(theme.$font-weight, 'bold')!important;
-    font: map.get(theme.$font-prolonged, 'm');
+    font: map.get(theme.$font-prolonged, 'xl');
   }
 }
 

templates/field/field--node--oe-departments--oe-call-proposals--full.html.twig

@@ -6,4 +6,4 @@
  * @see ./core/themes/stable/templates/field/field.html.twig
  */
 #}
-{%- include 'field--multiple-values--pipe-separated.html.twig' -%}
+{%- include 'field--multiple-values--comma-separated.html.twig' -%}

templates/field/field--node--oe-departments--oe-call-tenders--full.html.twig

@@ -6,4 +6,4 @@
  * @see ./core/themes/stable/templates/field/field.html.twig
  */
 #}
-{%- include 'field--multiple-values--pipe-separated.html.twig' -%}
+{%- include 'field--multiple-values--comma-separated.html.twig' -%}

templates/field/field--node--oe-departments--oe-call-tenders--teaser.html.twig

@@ -6,4 +6,4 @@
  * @see ./core/themes/stable/templates/field/field.html.twig
  */
 #}
-{%- include 'field--multiple-values--pipe-separated.html.twig' -%}
+{%- include 'field--multiple-values--comma-separated.html.twig' -%}

templates/field/field--node--oe-departments--oe-consultation--full.html.twig

@@ -6,4 +6,4 @@
  * @see ./core/themes/stable/templates/field/field.html.twig
  */
 #}
-{%- include 'field--multiple-values--pipe-separated.html.twig' -%}
+{%- include 'field--multiple-values--comma-separated.html.twig' -%}

templates/field/field--node--oe-departments--oe-news--full.html.twig

@@ -6,4 +6,4 @@
  * @see ./core/themes/stable/templates/field/field.html.twig
  */
 #}
-{%- include 'field--multiple-values--pipe-separated.html.twig' -%}
+{%- include 'field--multiple-values--comma-separated.html.twig' -%}

templates/field/field--node--oe-departments--oe-person--full.html.twig

@@ -6,4 +6,4 @@
  * @see ./core/themes/stable/templates/field/field.html.twig
  */
 #}
-{%- include 'field--multiple-values--pipe-separated.html.twig' -%}
+{%- include 'field--multiple-values--comma-separated.html.twig' -%}

templates/field/field--node--oe-departments--oe-person--teaser.html.twig

@@ -6,4 +6,4 @@
  * @see ./core/themes/stable/templates/field/field.html.twig
  */
 #}
-{%- include 'field--multiple-values--pipe-separated.html.twig' -%}
+{%- include 'field--multiple-values--comma-separated.html.twig' -%}

templates/field/field--node--oe-departments--oe-publication--full.html.twig

@@ -6,4 +6,4 @@
  * @see ./core/themes/stable/templates/field/field.html.twig
  */
 #}
-{% for item in items %}{{ item.content }}{% if not loop.last %} | {% endif %}{% endfor %}
+{%- include 'field--multiple-values--comma-separated.html.twig' -%}

tests/src/Functional/ContentCallForProposalsRenderTest.php

@@ -332,7 +332,7 @@ public function testProposalRendering(): void {
 
     $info_expected_values['items'][1] = [
       'label' => 'Departments',
-      'body' => 'Audit Board of the European Communities | Associated African States and Madagascar',
+      'body' => 'Audit Board of the European Communities, Associated African States and Madagascar',
     ];
     $field_list_assert->assertPattern($info_expected_values, $info_field_group->getHtml());
 

tests/src/Functional/ContentCallForTendersRenderTest.php

@@ -254,7 +254,7 @@ public function testTenderRendering(): void {
 
     $details_expected_values['items'][5] = [
       'label' => 'Departments',
-      'body' => 'Audit Board of the European Communities | Associated African States and Madagascar',
+      'body' => 'Audit Board of the European Communities, Associated African States and Madagascar',
     ];
     $field_list_assert->assertPattern($details_expected_values, $content_items[0]->getHtml());
 

tests/src/Functional/ContentConsultationRenderTest.php

@@ -195,7 +195,7 @@ public function testConsultationRendering(): void {
         'body' => '28 February 2020, 01:00 (AEDT)',
       ], [
         'label' => 'Departments',
-        'body' => 'Audit Board of the European Communities | Associated African States and Madagascar',
+        'body' => 'Audit Board of the European Communities, Associated African States and Madagascar',
       ],
     ];
     $details_html = $content_items[0]->getHtml();

tests/src/Functional/ContentNewsRenderTest.php

@@ -173,7 +173,7 @@ public function testNewsRendering(): void {
     $node->save();
     $this->drupalGet($node->toUrl());
     $details_expected_values['items'][3]['label'] = 'Departments';
-    $details_expected_values['items'][3]['body'] = 'Associated African States and Madagascar | Audit Board of the European Communities';
+    $details_expected_values['items'][3]['body'] = 'Associated African States and Madagascar, Audit Board of the European Communities';
     $details_html = $details->getHtml();
     $field_list_assert->assertPattern($details_expected_values, $details_html);
 

tests/src/Functional/ContentPersonRenderTest.php

@@ -150,7 +150,7 @@ public function testPersonRendering(): void {
       'items' => [
         [
           'label' => 'Departments',
-          'body' => 'Audit Board of the European Communities | Arab Common Market',
+          'body' => 'Audit Board of the European Communities, Arab Common Market',
         ],
       ],
     ];

tests/src/Functional/ContentPublicationRenderTest.php

@@ -228,7 +228,7 @@ public function testPublicationRendering(): void {
 
     $details_expected_values['items'][2] = [
       'label' => 'Related departments',
-      'body' => 'Audit Board of the European Communities | Associated African States and Madagascar',
+      'body' => 'Audit Board of the European Communities, Associated African States and Madagascar',
     ];
     $field_list_assert->assertPattern($details_expected_values, $content_items[0]->getHtml());
 
@@ -435,7 +435,7 @@ public function testPublicationRendering(): void {
       ],
       [
         'label' => 'Related departments',
-        'body' => 'Audit Board of the European Communities | Associated African States and Madagascar',
+        'body' => 'Audit Board of the European Communities, Associated African States and Madagascar',
       ],
       [
         'label' => 'Countries',
@@ -481,7 +481,7 @@ public function testPublicationRendering(): void {
       'label' => 'Part of collections',
       'body' => 'Test Publication collection node 1 | ES Test Publication collection node 2',
     ];
-    $details_expected_values['items'][3]['body'] = 'Comisión de Control de las Comunidades Europeas | Estados africanos y malgache asociados';
+    $details_expected_values['items'][3]['body'] = 'Comisión de Control de las Comunidades Europeas, Estados africanos y malgache asociados';
     $details_expected_values['items'][4]['body'] = 'Reino Unido, Francia';
     $field_list_assert->assertPattern($details_expected_values, $content_items[0]->getHtml());
 

tests/src/Kernel/CallForTendersRenderTest.php

@@ -132,7 +132,7 @@ public function testTeaser(): void {
               'body' => $deadline_date->format('d F Y, H:i (T)'),
             ], [
               'label' => 'Departments',
-              'body' => 'Audit Board of the European Communities | Arab Common Market',
+              'body' => 'Audit Board of the European Communities, Arab Common Market',
             ],
           ],
         ]),

tests/src/Kernel/PersonRenderTest.php

@@ -152,7 +152,7 @@ public function testTeaser(): void {
         'items' => [
           [
             'label' => 'Departments',
-            'body' => 'Audit Board of the European Communities | Arab Common Market',
+            'body' => 'Audit Board of the European Communities, Arab Common Market',
           ],
         ],
       ]),
@@ -262,8 +262,8 @@ public function testTeaser(): void {
     $expected_values['additional_information'][1] = new PatternAssertState(new FieldListAssert(), [
       'items' => [
         [
-          'label' => '(Acting) Adviser',
-          'body' => 'Description job_1',
+          'label' => 'Responsibilities',
+          'body' => '(Acting) AdviserDescription job_1',
         ],
       ],
     ]);
@@ -275,11 +275,8 @@ public function testTeaser(): void {
     $expected_values['additional_information'][1] = new PatternAssertState(new FieldListAssert(), [
       'items' => [
         [
-          'label' => '(Acting) Adviser',
-          'body' => 'Description job_1',
-        ], [
-          'label' => 'Chief Adviser',
-          'body' => 'Description job_2',
+          'label' => 'Responsibilities',
+          'body' => '(Acting) AdviserDescription job_1Chief AdviserDescription job_2',
         ],
       ],
     ]);
@@ -345,11 +342,8 @@ public function testTeaser(): void {
         new PatternAssertState(new FieldListAssert(), [
           'items' => [
             [
-              'label' => 'Singer',
-              'body' => 'Description job_1',
-            ], [
-              'label' => 'Dancer',
-              'body' => 'Description job_2',
+              'label' => 'Responsibilities',
+              'body' => 'SingerDescription job_1DancerDescription job_2',
             ],
           ],
         ]),