EWPP-1863: Add list with illustrations pattern.

package.json

@@ -40,6 +40,7 @@
     "@ecl/twig-component-inpage-navigation": "3.1.2",
     "@ecl/twig-component-language-list": "3.1.2",
     "@ecl/twig-component-link": "3.1.2",
+    "@ecl/twig-component-list-illustration": "3.1.2",
     "@ecl/twig-component-media-container": "3.1.2",
     "@ecl/twig-component-menu": "3.1.2",
     "@ecl/twig-component-message": "3.1.2",

templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml

@@ -0,0 +1,52 @@
+list_with_illustration:
+  label: "List with illustration"
+  description: "A list of items with associated illustrations."
+  variants:
+    vertical_images_large:
+      label: "Vertical with images (large)"
+      description: "Vertical list with large images."
+    vertical_images_square:
+      label: "Vertical with images (square)"
+      description: "Vertical list with square images."
+    vertical_icons:
+      label: "Vertical with icons"
+      description: "Vertical list with icons."
+    horizontal_images_large:
+      label: "Horizontal with images (large)"
+      description: "Horizontal list with large images."
+    horizontal_images_square:
+      label: "Horizontal with images (square)"
+      description: "Horizontal list with square images."
+    horizontal_icons:
+      label: "Horizontal with icons"
+      description: "Horizontal list with icons."
+  fields:
+    column:
+      type: "numeric"
+      label: "Column number"
+      description: "Number of columns (only applies to horizontal variants). Maximum of 4 columns."
+      preview: 4
+      escape: false
+    zebra:
+      type: "boolean"
+      label: "Zebra"
+      description: "Use zebra background (only applies to vertical variants)."
+      preview: true
+    items:
+      type: "array"
+      label: "Items"
+      description: "Array of list items"
+      preview:
+        - title: "Business, Economy, Euro"
+          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+          image:
+            src: "https://placeimg.com/1000/500/arch"
+            alt: "Alternative text for featured item image"
+          icon: "growth"
+        - title: "About the European Union"
+          description: "The EU and its institutions, how to visit and work at the EU."
+          image:
+            src: "https://placeimg.com/1000/500/arch"
+            alt: "Alternative text for featured item image"
+          icon: "budget"
+

templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig

@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ * List with illustration.
+ */
+#}
+
+{# Set the columns to 1 if vertical variants. #}
+{% if 'vertical' in variant %}
+  {% set column = 1 %}
+{% endif %}
+
+{# Set the zebra to false if horizontal variants. #}
+{% if 'horizontal' in variant %}
+  {% set zebra = false %}
+{% endif %}
+
+{% set _items = [] %}
+{% for item in items %}
+  {% if 'icon' in variant %}
+    {# Remove image information if an icon variant. #}
+    {% set _item = item|merge({'image': {}}) %}
+    {# Transform icon into ecl array. #}
+    {% if _item.icon %}
+      {% set _item = _item|merge({'icon': to_ecl_icon(item.icon)}) %}
+    {% endif %}
+  {% elseif 'image' in variant %}
+    {# Remove icon information if an image variant. #}
+    {% set _item = item|merge({'icon': {}}) %}
+    {# Make images square if square variant. #}
+    {% if _item.image and 'square' in variant %}
+      {% set _image = _item.image|merge({'squared': true}) %}
+      {% set _item = _item|merge({'image': _image}) %}
+    {% endif %}
+  {% endif %}
+  {% set _items = _items|merge([_item]) %}
+{% endfor %}
+{% include '@ecl-twig/list-illustration' with {
+  'column': column,
+  'zebra': zebra,
+  'items': _items,
+} only %}