Merge pull request #318 from openeuropa/OEL-2262

OEL-2262: Improvements on content-banner pattern.
openeuropa · May 17, 2023 · 1006ac6 · 1006ac6
2 parents 237faf0 + 648d11b
commit 1006ac6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/templates/patterns/content_banner/content-banner.ui_patterns.yml b/templates/patterns/content_banner/content-banner.ui_patterns.yml
@@ -24,6 +24,15 @@ content_banner:
       label: 'Title'
       description: 'Title of the content.'
       preview: 'This is the title of this page'
+    title_tag:
+      type: text
+      label: 'Title tag'
+      description: 'The tag to use for the title. Defaults to h1.'
+    action_bar:
+      type: render
+      label: 'Action bar region'
+      description: 'Action bar region. E.g. for action buttons.'
+      preview: '<div class="d-flex justify-content-end mt-2 align-items-center col-lg-11"><button class="w-auto me-3 btn btn-outline-primary btn-md" type="button">Submit</button></div>'
     content:
       type: text
       label: 'Content'

diff --git a/templates/patterns/content_banner/pattern-content-banner.html.twig b/templates/patterns/content_banner/pattern-content-banner.html.twig
@@ -12,11 +12,15 @@
     {% set content_attributes = create_attribute() %}
     <div class="my-4">
       {% for _meta_item in meta %}
-        <span class="text-muted me-3">{{ _meta_item }}</span>
+        {% if _meta_item is not empty %}
+          <span class="text-muted me-3">{{ _meta_item }}</span>
+        {% endif %}
       {% endfor %}
     </div>
   {% endif %}
-  <div{{ content_attributes }}>{{ content }}</div>
+  {% if content is not empty %}
+    <div{{ content_attributes }}>{{ content }}</div>
+  {% endif %}
 {% endset %}
 
 {# Enable 'outline' in every badge. #}
@@ -31,6 +35,7 @@
 {% include '@oe-bcl/bcl-content-banner/bcl-content-banner.html.twig' with {
   'background': background,
   'title': title,
+  'title_tag': title_tag|default('h1'),
   'content': _content,
   'image': image ? {
     'path': image.src,
@@ -39,6 +44,7 @@
   'image_size': image_size ?? 'lg',
   'badges': _badges,
   'links': links,
+  'action_bar': action_bar,
   'attributes': attributes,
 } only %}
 {% endapply %}
diff --git a/tests/src/Kernel/fixtures/markup_rendering_patterns/content_banner.yml b/tests/src/Kernel/fixtures/markup_rendering_patterns/content_banner.yml
@@ -1,4 +1,4 @@
-content_banner_white_background_with_image_with_badges_with_meta_with_links:
+content_banner_white_background_with_image_with_badges_with_meta_with_links_with_action_bar_with_title_tag:
   render:
     '#type': pattern
     '#id': 'content_banner'
@@ -11,6 +11,9 @@ content_banner_white_background_with_image_with_badges_with_meta_with_links:
         src: 'https://placeimg.com/1200/600/tech'
         alt: 'Alternative text for content banner image'
       title: 'This is the title of this page'
+      title_tag: 'h2'
+      action_bar: 
+        - '#markup':  '<div class="action-bar d-flex justify-content-end mt-2 align-items-center col-lg-11"><a href="#" class="standalone" type="button">Submit</a></div>'
       content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec.'
       badges:
         - label: 'Primary badge'
@@ -28,8 +31,10 @@ content_banner_white_background_with_image_with_badges_with_meta_with_links:
       'div.bcl-content-banner': 1
       'div.bcl-content-banner.bg-white': 1
       'img': 1
+      'div.bcl-content-banner > div.container > div.action-bar': 1
+      'div.bcl-content-banner > div.container > div.action-bar > a.standalone': 1
       'article.card > div.row > div.bcl-card-start-col.bcl-size-large > img[src="https://placeimg.com/1200/600/tech"]': 1
-      'div.card-body > h1': 1
+      'div.card-body > h2': 1
       'div.card-body > div': 4
       'div.card-body > div.mt-4': 0
       'div.card-body > div > span.text-muted': 2
@@ -38,7 +43,7 @@ content_banner_white_background_with_image_with_badges_with_meta_with_links:
       'a[href="https://example-1.com"]': 1
       'a[href="https://example-2.com"]': 1
     equals:
-      'div.card-body > h1': 'This is the title of this page'
+      'div.card-body > h2': 'This is the title of this page'
       'div.card-body > div:nth-child(3)': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec.'
       'div.card-body > div > span.badge:nth-child(1)': 'Primary badge'
       'div.card-body > div > span.badge.badge-outline-primary': 'Secondary badge'