EWPP-2455: Allow list item block pattern to order items vertically.

openeuropa · Aug 31, 2022 · 29ddc3e · 29ddc3e
1 parent c5d468c
commit 29ddc3e
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 35 deletions.
diff --git a/templates/compositions/ec-component-content-item-block/content-item-block.html.twig b/templates/compositions/ec-component-content-item-block/content-item-block.html.twig
@@ -42,14 +42,14 @@
 {% endif %}
 
 {% set _extra_classes_item = 'ecl-col-12' %}
-{% if _type == 'two' %}
-  {% set _extra_classes_item = 'ecl-col-12 ecl-col-l-6' %}
-{% elseif _type == 'three' %}
-  {% set _extra_classes_item = 'ecl-col-12 ecl-col-l-4' %}
-{% elseif _type == 'four' %}
-  {% set _extra_classes_item = 'ecl-col-12 ecl-col-l-3' %}
-{% elseif _type == 'six' %}
-  {% set _extra_classes_item = 'ecl-col-12 ecl-col-l-2' %}
+{% if _type == 2 %}
+  {% set _extra_classes_item = _extra_classes_item ~ ' ecl-col-l-6' %}
+{% elseif _type == 3 %}
+  {% set _extra_classes_item = _extra_classes_item ~ ' ecl-col-l-4' %}
+{% elseif _type == 4 %}
+  {% set _extra_classes_item = _extra_classes_item ~ ' ecl-col-l-3' %}
+{% elseif _type == 6 %}
+  {% set _extra_classes_item = _extra_classes_item ~ ' ecl-col-l-2' %}
 {% endif %}
 
 <div class="{{ _css_class }}"{{ _extra_attributes|raw }}>
@@ -62,11 +62,24 @@
   {% endif %}
 
   <div class="ecl-row">
-    {% for _item in _items %}
-      <div class="ecl-content-item-block__item ecl-u-mb-s {{ _extra_classes_item }}">
-        {{ _item }}
-      </div>
-    {% endfor %}
+    {% if vertical %}
+      {% set items_per_column = _items|length/_type %}
+      {% for column in _items|batch(items_per_column) %}
+        <div class="ecl-content-item-block__item ecl-u-mb-s {{ _extra_classes_item }}">
+          {% for _item in column %}
+            <div class="ecl-content-item-block__item ecl-u-mb-s">
+              {{ _item }}
+            </div>
+          {% endfor %}
+        </div>
+      {% endfor %}
+    {% else %}
+      {% for _item in _items %}
+        <div class="ecl-content-item-block__item ecl-u-mb-s {{ _extra_classes_item }}">
+          {{ _item }}
+        </div>
+      {% endfor %}
+    {% endif %}
   </div>
 
   {% if _button.path %}

diff --git a/templates/patterns/list_item_blocks/list_item_block_four_columns.ui_patterns.yml b/templates/patterns/list_item_blocks/list_item_block_four_columns.ui_patterns.yml
@@ -77,3 +77,8 @@ list_item_block_four_columns:
       label: "External link"
       description: "Whether the Button URL is external or not."
       preview: false
+    vertical:
+      type: "boolean"
+      label: "Vertical order"
+      description: "Whether the items to be ordered from top to bottom instead of left to right."
+      preview: true
diff --git a/templates/patterns/list_item_blocks/list_item_block_one_column.ui_patterns.yml b/templates/patterns/list_item_blocks/list_item_block_one_column.ui_patterns.yml
@@ -52,3 +52,8 @@ list_item_block_one_column:
       label: "External link"
       description: "Whether the Button URL is external or not."
       preview: true
+    vertical:
+      type: "boolean"
+      label: "Vertical order"
+      description: "Whether the items to be ordered from top to bottom instead of left to right."
+      preview: true
diff --git a/templates/patterns/list_item_blocks/list_item_block_six_columns.ui_patterns.yml b/templates/patterns/list_item_blocks/list_item_block_six_columns.ui_patterns.yml
@@ -54,3 +54,8 @@ list_item_block_six_columns:
       label: "External link"
       description: "Whether the Button URL is external or not."
       preview: true
+    vertical:
+      type: "boolean"
+      label: "Vertical order"
+      description: "Whether the items to be ordered from top to bottom instead of left to right."
+      preview: false
diff --git a/templates/patterns/list_item_blocks/list_item_block_three_columns.ui_patterns.yml b/templates/patterns/list_item_blocks/list_item_block_three_columns.ui_patterns.yml
@@ -67,3 +67,8 @@ list_item_block_three_columns:
       label: "External link"
       description: "Whether the Button URL is external or not."
       preview: true
+    vertical:
+      type: "boolean"
+      label: "Vertical order"
+      description: "Whether the items to be ordered from top to bottom instead of left to right."
+      preview: true
diff --git a/templates/patterns/list_item_blocks/list_item_block_two_columns.ui_patterns.yml b/templates/patterns/list_item_blocks/list_item_block_two_columns.ui_patterns.yml
@@ -57,3 +57,8 @@ list_item_block_two_columns:
       label: "External link"
       description: "Whether the Button URL is external or not."
       preview: false
+    vertical:
+      type: "boolean"
+      label: "Vertical order"
+      description: "Whether the items to be ordered from top to bottom instead of left to right."
+      preview: true
diff --git a/templates/patterns/list_item_blocks/pattern-list-item-block-four-columns.html.twig b/templates/patterns/list_item_blocks/pattern-list-item-block-four-columns.html.twig
@@ -10,7 +10,7 @@
   {% set _button_icon_position = 'after' %}
 {% endif %}
 {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with {
-  type: 'four',
+  type: 4,
   title: title,
   items: items,
   icon_path: ecl_icon_path,
@@ -19,5 +19,6 @@
     label: button_label,
     icon_name: button_icon_name,
     icon_position: _button_icon_position
-  }
+  },
+  vertical: vertical|default(false)
 } only %}
diff --git a/templates/patterns/list_item_blocks/pattern-list-item-block-one-column.html.twig b/templates/patterns/list_item_blocks/pattern-list-item-block-one-column.html.twig
@@ -10,7 +10,7 @@
   {% set _button_icon_position = 'after' %}
 {% endif %}
 {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with {
-  type: 'one',
+  type: 1,
   title: title,
   items: items,
   icon_path: ecl_icon_path,
@@ -19,5 +19,6 @@
     label: button_label,
     icon_name: button_icon_name,
     icon_position: _button_icon_position
-  }
+  },
+  vertical: vertical|default(false)
 } only %}
diff --git a/templates/patterns/list_item_blocks/pattern-list-item-block-six-columns.html.twig b/templates/patterns/list_item_blocks/pattern-list-item-block-six-columns.html.twig
@@ -10,7 +10,7 @@
   {% set _button_icon_position = 'after' %}
 {% endif %}
 {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with {
-  type: 'six',
+  type: 6,
   title: title,
   items: items,
   icon_path: ecl_icon_path,
@@ -19,5 +19,6 @@
     label: button_label,
     icon_name: button_icon_name,
     icon_position: _button_icon_position
-  }
+  },
+  vertical: vertical|default(false)
 } only %}
diff --git a/templates/patterns/list_item_blocks/pattern-list-item-block-three-columns.html.twig b/templates/patterns/list_item_blocks/pattern-list-item-block-three-columns.html.twig
@@ -10,7 +10,7 @@
   {% set _button_icon_position = 'after' %}
 {% endif %}
 {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with {
-  type: 'three',
+  type: 3,
   title: title,
   items: items,
   icon_path: ecl_icon_path,
@@ -19,5 +19,6 @@
     label: button_label,
     icon_name: button_icon_name,
     icon_position: _button_icon_position
-  }
+  },
+  vertical: vertical|default(false)
 } only %}
diff --git a/templates/patterns/list_item_blocks/pattern-list-item-block-two-columns.html.twig b/templates/patterns/list_item_blocks/pattern-list-item-block-two-columns.html.twig
@@ -10,7 +10,7 @@
   {% set _button_icon_position = 'after' %}
 {% endif %}
 {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with {
-  type: 'two',
+  type: 2,
   title: title,
   items: items,
   icon_path: ecl_icon_path,
@@ -19,5 +19,6 @@
     label: button_label,
     icon_name: button_icon_name,
     icon_position: _button_icon_position
-  }
+  },
+  vertical: vertical|default(false)
 } only %}
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
@@ -1635,24 +1635,40 @@
           '#fields':
             title: "List item 3"
             detail: "Description for list item 3."
+        - '#type': "pattern"
+          '#id': "list_item"
+          '#fields':
+            title: "List item 4"
+            detail: "Description for list item 4."
+        - '#type': "pattern"
+          '#id': "list_item"
+          '#fields':
+            title: "List item 5"
+            detail: "Description for list item 5."
+      vertical: true
   assertions:
     count:
       'div.ecl-content-item-block__title': 0
       'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 0
-      'div.ecl-content-item-block__item': 3
+      'div.ecl-content-item-block__item': 8
       'div.ecl-content-item-block__item.ecl-col-l-6': 0
-      'div.ecl-content-item-block__item.ecl-col-l-4': 3
+      'div.ecl-content-item-block__item.ecl-u-mb-s.ecl-col-12.ecl-col-l-4': 3
       'div.ecl-content-item-block__item.ecl-col-l-6 article.ecl-content-item': 0
-      'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 3
+      'div.ecl-content-item-block__item.ecl-u-mb-s.ecl-col-12.ecl-col-l-4 div.ecl-content-item-block__item.ecl-u-mb-s': 5
+      'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 5
       'div.ecl-content-item-block__button': 0
       'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 0
     equals:
-      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "List item 1"
-      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "Description for list item 1."
-      'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__title': "List item 2"
-      'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__description': "Description for list item 2."
-      'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__title': "List item 3"
-      'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__description': "Description for list item 3."
+      'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(1) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(1) article div.ecl-content-item__title': "List item 1"
+      'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(1) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(1) article div.ecl-content-item__description': "Description for list item 1."
+      'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(1) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(2) article div.ecl-content-item__title': "List item 2"
+      'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(1) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(2) article div.ecl-content-item__description': "Description for list item 2."
+      'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(2) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(1) article div.ecl-content-item__title': "List item 3"
+      'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(2) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(1) article div.ecl-content-item__description': "Description for list item 3."
+      'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(2) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(2) article div.ecl-content-item__title': "List item 4"
+      'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(2) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(2) article div.ecl-content-item__description': "Description for list item 4."
+      'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(3) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(1) article div.ecl-content-item__title': "List item 5"
+      'div.ecl-content-item-block__item.ecl-col-12.ecl-col-l-4:nth-child(3) div.ecl-content-item-block__item.ecl-u-mb-s:nth-child(1) article div.ecl-content-item__description': "Description for list item 5."
 - array:
     '#type': pattern
     '#id': list_item_block_three_columns
@@ -1673,6 +1689,16 @@
           '#fields':
             title: "List item 3"
             detail: "Description for list item 3."
+        - '#type': "pattern"
+          '#id': "list_item"
+          '#fields':
+            title: "List item 4"
+            detail: "Description for list item 4."
+        - '#type': "pattern"
+          '#id': "list_item"
+          '#fields':
+            title: "List item 5"
+            detail: "Description for list item 5."
       button_label: "View all"
       button_url: "http://example.com"
       button_icon_name: "language"
@@ -1681,11 +1707,11 @@
     count:
       'div.ecl-content-item-block__title': 0
       'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 0
-      'div.ecl-content-item-block__item': 3
+      'div.ecl-content-item-block__item': 5
       'div.ecl-content-item-block__item.ecl-col-l-6': 0
-      'div.ecl-content-item-block__item.ecl-col-l-4': 3
+      'div.ecl-content-item-block__item.ecl-col-l-4': 5
       'div.ecl-content-item-block__item.ecl-col-l-6 article.ecl-content-item': 0
-      'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 3
+      'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 5
       'div.ecl-content-item-block__button': 1
       'div.ecl-content-item-block__button a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
     equals:
@@ -1695,6 +1721,10 @@
       'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__description': "Description for list item 2."
       'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__title': "List item 3"
       'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__description': "Description for list item 3."
+      'div.ecl-content-item-block__item:nth-child(4) article.ecl-content-item div.ecl-content-item__title': "List item 4"
+      'div.ecl-content-item-block__item:nth-child(4) article.ecl-content-item div.ecl-content-item__description': "Description for list item 4."
+      'div.ecl-content-item-block__item:nth-child(5) article.ecl-content-item div.ecl-content-item__title': "List item 5"
+      'div.ecl-content-item-block__item:nth-child(5) article.ecl-content-item div.ecl-content-item__description': "Description for list item 5."
       'a.ecl-link': '<span class="ecl-link__label">View all</span><svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#language"></use></svg>'
 - array:
     '#type': pattern