EWPP-4496: Add the introduction field to list items patterns.

templates/compositions/ec-component-content-item-block/content-item-block.html.twig

@@ -1,23 +1,24 @@
 {% apply spaceless %}
 
 {#
-  /**
-   * @file
-   * Theme implementation for a ECL Content Item Block.
-   */
-  Parameters:
-    - "type" (string) (default: 'one'): Type of Content Item Block
-    - "title" (string) (default: ''): Title of Content Item Block
-    - "items" (array) (default: []): Content Item's for the Content Item Block
-    - "button" (associative array) (default: {}): Predefined structure compatible with Link component.
-    - "extra_classes" (string) (default: '')
-    - "extra_attributes" (array) (default: []): format: [
-        {
-          "name" (string) (default: ''),
-          "value" (string) (default: '')
-        },
-        ...
-      ]
+/**
+ * @file
+ * Theme implementation for a ECL Content Item Block.
+ */
+Parameters:
+  - "type" (string) (default: 'one'): Type of Content Item Block
+  - "title" (string) (default: ''): Title of Content Item Block
+  - "introduction" (string) (default: ''): A brief summary of the block.
+  - "items" (array) (default: []): Content Item's for the Content Item Block
+  - "button" (associative array) (default: {}): Predefined structure compatible with Link component.
+  - "extra_classes" (string) (default: '')
+  - "extra_attributes" (array) (default: []): format: [
+      {
+        "name" (string) (default: ''),
+        "value" (string) (default: '')
+      },
+      ...
+    ]
 #}
 
 {# Internal properties #}
@@ -26,6 +27,7 @@
 {% set _extra_attributes = '' %}
 {% set _type = type|default('one') %}
 {% set _title = title|default('') %}
+{% set _introduction = introduction|default('') %}
 {% set _items = items|default([]) %}
 {% set _button = button|default({}) %}
 
@@ -61,6 +63,14 @@
     </div>
   {% endif %}
 
+  {% if _introduction %}
+    <div class="ecl-row">
+      <div class="ecl-content-item-block__introduction ecl ecl-u-mb-2xl ecl-col-12">
+        {{ _introduction }}
+      </div>
+    </div>
+  {% endif %}
+
   <div class="ecl-row">
     {% if vertical %}
       {% set items_per_column = _items|length/_type %}

templates/patterns/list_item_blocks/list_item_block_four_columns.ui_patterns.yml

@@ -7,6 +7,12 @@ list_item_block_four_columns:
       label: "Title"
       description: "Block title"
       preview: "The European Commission's priorities"
+    introduction:
+      type: "text"
+      label: "Introduction"
+      description: "A brief summary of the content on the list."
+      preview:
+        '#markup': "<p>The European Commission focuses on <strong>several key areas:</strong> supporting the EU economy and businesses, and providing guidance on living, working and traveling in the EU. Read more about our priorities.</p>"
     items:
       type: "array"
       label: "Layout items"

templates/patterns/list_item_blocks/list_item_block_one_column.ui_patterns.yml

@@ -7,6 +7,12 @@ list_item_block_one_column:
       label: "Title"
       description: "Block title"
       preview: "The European Commission's priorities"
+    introduction:
+      type: "text"
+      label: "Introduction"
+      description: "A brief summary of the content on the list."
+      preview:
+        '#markup': "<p>The European Commission focuses on <strong>several key areas:</strong> supporting the EU economy and businesses, and providing guidance on living, working and traveling in the EU. Read more about our priorities.</p>"
     items:
       type: "array"
       label: "Layout items"

templates/patterns/list_item_blocks/list_item_block_six_columns.ui_patterns.yml

@@ -7,6 +7,12 @@ list_item_block_six_columns:
       label: "Title"
       description: "Block title"
       preview: "The European Commission's priorities"
+    introduction:
+      type: "text"
+      label: "Introduction"
+      description: "A brief summary of the content on the list."
+      preview:
+        '#markup': "<p>The European Commission focuses on <strong>several key areas:</strong> supporting the EU economy and businesses, and providing guidance on living, working and traveling in the EU. Read more about our priorities.</p>"
     items:
       type: "array"
       label: "Layout items"

templates/patterns/list_item_blocks/list_item_block_three_columns.ui_patterns.yml

@@ -7,6 +7,12 @@ list_item_block_three_columns:
       label: "Title"
       description: "Block title"
       preview: "The European Commission's priorities"
+    introduction:
+      type: "text"
+      label: "Introduction"
+      description: "A brief summary of the content on the list."
+      preview:
+        '#markup': "<p>The European Commission focuses on <strong>several key areas:</strong> supporting the EU economy and businesses, and providing guidance on living, working and traveling in the EU. Read more about our priorities.</p>"
     items:
       type: "array"
       label: "Layout items"

templates/patterns/list_item_blocks/list_item_block_two_columns.ui_patterns.yml

@@ -7,6 +7,12 @@ list_item_block_two_columns:
       label: "Title"
       description: "Block title"
       preview: "The European Commission's priorities"
+    introduction:
+      type: "text"
+      label: "Introduction"
+      description: "A brief summary of the content on the list."
+      preview:
+        '#markup': "<p>The European Commission focuses on <strong>several key areas:</strong> supporting the EU economy and businesses, and providing guidance on living, working and traveling in the EU. Read more about our priorities.</p>"
     items:
       type: "array"
       label: "Layout items"

templates/patterns/list_item_blocks/pattern-list-item-block-four-columns.html.twig

@@ -13,6 +13,7 @@
 {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with {
   type: 4,
   title: title,
+  introduction: introduction,
   items: items,
   icon_path: ecl_icon_path,
   button: {

templates/patterns/list_item_blocks/pattern-list-item-block-one-column.html.twig

@@ -13,6 +13,7 @@
 {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with {
   type: 1,
   title: title,
+  introduction: introduction,
   items: items,
   icon_path: ecl_icon_path,
   button: {

templates/patterns/list_item_blocks/pattern-list-item-block-six-columns.html.twig

@@ -13,6 +13,7 @@
 {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with {
   type: 6,
   title: title,
+  introduction: introduction,
   items: items,
   icon_path: ecl_icon_path,
   button: {

templates/patterns/list_item_blocks/pattern-list-item-block-three-columns.html.twig

@@ -13,6 +13,7 @@
 {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with {
   type: 3,
   title: title,
+  introduction: introduction,
   items: items,
   icon_path: ecl_icon_path,
   button: {

templates/patterns/list_item_blocks/pattern-list-item-block-two-columns.html.twig

@@ -13,6 +13,7 @@
 {% include '@oe_theme/compositions/ec-component-content-item-block/content-item-block.html.twig' with {
   type: 2,
   title: title,
+  introduction: introduction,
   items: items,
   icon_path: ecl_icon_path,
   button: {