ISSUE-293: Add template for Content row paragraph type Columns layout variant.

composer.json

@@ -78,6 +78,9 @@
         "patches": {
             "drupal/drupal-driver": {
                 "allow-date-only-date-fields": "https://patch-diff.githubusercontent.com/raw/jhedstrom/DrupalDriver/pull/201.patch"
+            },
+            "openeuropa/oe_paragraphs": {
+                "Add new variant for the Content row type - column Layout": "https://patch-diff.githubusercontent.com/raw/openeuropa/oe_paragraphs/pull/66.patch"
             }
         }
     },

oe_theme.theme

@@ -710,6 +710,79 @@ function oe_theme_preprocess_paragraph__oe_content_row__variant_inpage_navigatio
   $variables['links'] = $links;
 }
 
+/**
+ * Implements hook_preprocess_paragraph() for paragraph--oe-content-row--variant-columns_layout.html.twig.
+ *
+ * Prepares layout grid rows and columns for displaying content
+ * in "columns layout" variant of the "content row" paragraph type.
+ */
+function oe_theme_preprocess_paragraph__oe_content_row__variant_columns_layout(array &$variables): void {
+  /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
+  $paragraph = $variables['paragraph'];
+
+  // Default number of columns in the grid.
+  $grid_column_count = 12;
+
+  // Number of columns for displaying content, default is 1.
+  $column_count = 1;
+  // Array of column widths (relative to the grid e.g. [4,8] or [3,6,3]).
+  $layout = [];
+  if (!$paragraph->get('field_oe_content_row_layout')->isEmpty()) {
+    // Layout settings can be defined as an integer (number of equal columns),
+    // or as a string representing the column widths in the format: '3-6-3'.
+    $layout_settings = $paragraph->get('field_oe_content_row_layout')->value;
+    if (is_numeric($layout_settings)) {
+      // Set column count and layout for equal width columns.
+      $column_count = (int) $layout_settings;
+      $layout = array_fill(0, $column_count, $grid_column_count / $column_count);
+    }
+    else {
+      // Set column count and layout for variable width columns.
+      $layout = explode('-', $layout_settings) ?? [$grid_column_count];
+      $column_count = count($layout);
+    }
+  }
+
+  // Create a shortcut to the render array for the field.
+  $field_render = &$variables['content']['field_oe_paragraphs'];
+  // Array for the template to loop through.
+  $rows = [];
+  // Default row array used in $rows.
+  $row = [
+    'columns' => [],
+  ];
+  if ($column_count > 1) {
+    // Get paragraph entities referenced for the content row paragraph.
+    $sub_paragraphs = $paragraph->get('field_oe_paragraphs')->referencedEntities();
+    // Calculate number of rows or add default fallback.
+    $row_count = $sub_paragraphs ? (int) ceil(count($sub_paragraphs) / $column_count) : 1;
+
+    // Index of sub paragraph.
+    $delta = 0;
+    // Collect rows and columns for multi-column display.
+    for ($i = 0; $i < $row_count; $i++) {
+      $rows[$i] = $row;
+      for ($j = 0; $j < $column_count; $j++) {
+        $rows[$i]['columns'][] = [
+          'width' => $layout[$j],
+          'content' => $field_render[$delta] ?? [],
+        ];
+        $delta++;
+      }
+    }
+  }
+  else {
+    // Add row and column for single-column display.
+    $row['columns'][] = [
+      'width' => $grid_column_count,
+      'content' => $field_render,
+    ];
+    $rows[] = $row;
+  }
+
+  $variables['rows'] = $rows;
+}
+
 /**
  * Implements hook_preprocess_pattern().
  */

templates/paragraphs/paragraph--oe-content-row--variant-columns_layout.html.twig

@@ -0,0 +1,17 @@
+{#
+/**
+ * @file
+ * Theme override to display the "content row" type paragraph in the "columns layout" variant.
+ *
+ * @see ./modules/contrib/paragraphs/templates/paragraph.html.twig
+ */
+#}
+{% for row in rows %}
+  <div class="ecl-row">
+    {% for column in row.columns %}
+      <div class="ecl-col-md-{{ column.width }}">
+        {{ column.content }}
+      </div>
+    {% endfor %}
+  </div>
+{% endfor %}

tests/Kernel/Paragraphs/ContentRowLayoutTest.php

@@ -0,0 +1,140 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace Drupal\Tests\oe_theme\Kernel\Paragraphs;
+
+use Drupal\paragraphs\Entity\Paragraph;
+use Symfony\Component\DomCrawler\Crawler;
+
+/**
+ * Tests the "content row" layout paragraph.
+ */
+class ContentRowLayoutTest extends ParagraphsTestBase {
+
+  /**
+   * Tests the rendering of the paragraph type "content row with 3-col layout".
+   *
+   * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
+   */
+  public function testRenderingThreeColLayout(): void {
+    // Create multiple paragraphs to be referenced in the content row.
+    $items = [];
+
+    // Create a links block paragraph.
+    $paragraph = Paragraph::create([
+      'type' => 'oe_links_block',
+      'field_oe_text' => 'Links block title',
+      'field_oe_links' => [
+        [
+          'title' => 'Link 1',
+          'uri' => 'internal:/',
+        ],
+      ],
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    // Create a list item paragraph.
+    $paragraph = Paragraph::create([
+      'type' => 'oe_list_item',
+      'oe_paragraphs_variant' => 'default',
+      'field_oe_title' => 'List item title',
+      'field_oe_text_long' => 'Item description',
+      'field_oe_link' => [
+        'uri' => 'http://www.example.com/',
+      ],
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    // Create a rich text paragraph with a title.
+    $paragraph = Paragraph::create([
+      'type' => 'oe_rich_text',
+      'field_oe_title' => 'Rich text title',
+      'field_oe_text_long' => 'Rich text without title.',
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    // Create the main content row paragraph with a columns layout variant.
+    $paragraph = Paragraph::create([
+      'type' => 'oe_content_row',
+      'oe_paragraphs_variant' => 'columns_layout',
+      'field_oe_title' => 'Three col layout',
+      'field_oe_content_row_layout' => '3',
+      'field_oe_paragraphs' => $items,
+    ]);
+
+    $html = $this->renderParagraph($paragraph);
+    $crawler = new Crawler($html);
+
+    // Verify the layout having three columns.
+    $this->assertCount(3, $crawler->filter('.ecl-row .ecl-col-md-4'));
+
+    // Verify that the columns contain the correct paragraph.
+    $this->assertContains('Links block title', $crawler->filter('.ecl-row .ecl-col-md-4')->eq(0)->html());
+    $this->assertContains('List item title', $crawler->filter('.ecl-row .ecl-col-md-4')->eq(1)->html());
+    $this->assertContains('Rich text title', $crawler->filter('.ecl-row .ecl-col-md-4')->eq(2)->html());
+  }
+
+  /**
+   * Tests the rendering of the paragraph type "content row with 2-col layout".
+   *
+   * Tests the rendering of non-equal 2-col layout.
+   *
+   * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
+   */
+  public function testRenderingTwoNonEqualColLayout(): void {
+    // Create multiple paragraphs to be referenced in the content row.
+    $items = [];
+
+    // Create a links block paragraph.
+    $paragraph = Paragraph::create([
+      'type' => 'oe_links_block',
+      'field_oe_text' => 'Links block title',
+      'field_oe_links' => [
+        [
+          'title' => 'Link 1',
+          'uri' => 'internal:/',
+        ],
+      ],
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    // Create a list item paragraph.
+    $paragraph = Paragraph::create([
+      'type' => 'oe_list_item',
+      'oe_paragraphs_variant' => 'default',
+      'field_oe_title' => 'List item title',
+      'field_oe_text_long' => 'Item description',
+      'field_oe_link' => [
+        'uri' => 'http://www.example.com/',
+      ],
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    // Create the main content row paragraph with a columns layout variant.
+    $paragraph = Paragraph::create([
+      'type' => 'oe_content_row',
+      'oe_paragraphs_variant' => 'columns_layout',
+      'field_oe_title' => 'Non-equal two col layout',
+      'field_oe_content_row_layout' => '8-4',
+      'field_oe_paragraphs' => $items,
+    ]);
+
+    $html = $this->renderParagraph($paragraph);
+    $crawler = new Crawler($html);
+
+    // Verify the layout having two non-equal columns.
+    $this->assertCount(1, $crawler->filter('.ecl-row .ecl-col-md-8'));
+    $this->assertCount(1, $crawler->filter('.ecl-row .ecl-col-md-4'));
+
+    // Verify that the columns contain the correct paragraph.
+    $this->assertContains('Links block title', $crawler->filter('.ecl-row .ecl-col-md-8')->html());
+    $this->assertContains('List item title', $crawler->filter('.ecl-row .ecl-col-md-4')->html());
+  }
+
+}