@openeuropa/bcl-theme-default 0.14.0 → 0.18.0

package/templates/bcl-listing/listing.html.twig

@@ -4,7 +4,7 @@
   - variant: (string) (default: "horizontal") options:
   [ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
   - title: (string) (default: "")
-  - title_tag: (string) (default: "h4")
+  - title_tag: (string) (default: "h2")
   - items: (array of objects of type card)
   - link: (object of type link)
   - alignment: (string) (default: '') options:
@@ -14,8 +14,8 @@
 {% set _items = items|default([]) %}
 {% set _variant = variant|default('default-1-col') %}
 {% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
 {% set _alignment = alignment|default('') %}
-{% set _title_tag = title_tag|default('h4') %}
 {% set _link = link|default({}) %}
 {% set _classes = ['bcl-listing', 'bcl-listing--' ~ _variant] %}
 {% set _cards = [] %}
@@ -25,6 +25,11 @@
   gutter: '4',
   attributes: create_attribute(),
 } %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 <div {{ attributes }}>
@@ -32,17 +37,20 @@
 {% if _title is not empty %}
   {% set _title_classes = 'fw-bold mb-4' %}
   <{{ _title_tag }} class="{{ _title_classes }}">
-    {{ _title }}
+    {{- _title -}}
   </{{ _title_tag }}>
 {% endif %}
 
 {% if _items is not empty %}
   {% for _card in _items %}
+    {% set  _alignment_class = '' %}
     {% set _max_width = '' %}
     {% set _image = {} %}
     {% if _card.image is not empty %}
       {% set _max_width = 'mw-listing-img' %}
-      {% set _image_classes = _card.image.classes ? _card.image.classes ~ " mb-3" : "mb-3" %}
+      {% if not _alignment == 'center' %}
+        {% set _image_classes = _card.image.classes ? _card.image.classes ~ ' mb-3' : 'mb-3' %}
+      {% endif %}
       {% set _card = _card|merge({image: _card.image|merge({
         classes: _image_classes
       })}) %}
@@ -50,7 +58,7 @@
       {% set _max_width = 'mw-date mb-3' %}
     {% endif %}
     {% if _alignment is not empty %}
-      {% set _alignment = ' align-self-' ~ _alignment %}
+      {% set _alignment_class = ' align-self-' ~ _alignment %}
     {% endif %}
     {% set _card_classes = [] %}
     {% set _card_attributes = card.attributes ? card.attributes : create_attribute() %}
@@ -67,8 +75,8 @@
         horizontal: true,
         extra_classes_body: 'p-0 pb-md-0 pb-3',
         horizontal_grid: {
-          left_col_classes: 'col-md-3 col-lg-2 rounded ' ~ _max_width ~ _alignment,
-          right_col_classes: 'col-md-9 col-lg-10' ~ _alignment,
+          left_col_classes: 'col-md-3 col-lg-2 rounded ' ~ _max_width ~ _alignment_class,
+          right_col_classes: 'col-md-9 col-lg-10' ~ _alignment_class,
         },
         attributes: _card_attributes,
       }) %}
@@ -91,8 +99,8 @@
       {% if _variant == 'default-2-col' %}
         {% set _card = _card|merge({
           horizontal_grid: {
-            left_col_classes: 'col-xl-3 col-md-5 ' ~ _max_width ~ _alignment,
-            right_col_classes: 'col-xl-9 col-md-7' ~ _alignment,
+            left_col_classes: 'col-xl-3 col-md-5 ' ~ _max_width ~ _alignment_class,
+            right_col_classes: 'col-xl-9 col-md-7' ~ _alignment_class,
           },
         }) %}
         {% set _card_layout = _card_layout|merge({
@@ -101,8 +109,8 @@
       {% else %}
         {% set _card = _card|merge({
           horizontal_grid: {
-            left_col_classes: 'col-lg-4 col-md-6 ' ~ _max_width ~ _alignment,
-            right_col_classes: 'col-lg-8 col-md-6' ~ _alignment,
+            left_col_classes: 'col-lg-4 col-md-6 ' ~ _max_width ~ _alignment_class,
+            right_col_classes: 'col-lg-8 col-md-6' ~ _alignment_class,
           },
         }) %}
         {% set _card_layout = _card_layout|merge({
@@ -121,10 +129,14 @@
       ] %}
      {% set _card_attributes = _card_attributes.addClass(_card_classes) %}
      {% set _card = _card|merge({
-         extra_classes_body: 'pb-4',
          wrapper_class: 'col',
          attributes: _card_attributes,
       }) %}
+      {% if _card.image is defined and _card.image is not empty %}
+        {% set _card = _card|merge({
+          extra_classes_body: "pt-0",
+        }) %}
+      {% endif %}
      {% set _card_layout = _card_layout|merge({
        cols_extra_classes: 'mt-4-5',
      }) %}
@@ -141,9 +153,13 @@
       {% set _card_attributes = _card_attributes.addClass(_card_classes) %}
       {% set _card = _card|merge({
         wrapper_class: 'col',
-        extra_classes_body: 'pt-0',
         attributes: _card_attributes,
       }) %}
+      {% if _card.image is defined and _card.image is not empty %}
+        {% set _card = _card|merge({
+          extra_classes_body: 'pt-0',
+        }) %}
+      {% endif %}
       {% set _card_layout = _card_layout|merge({ gutter: '4' }) %}
       {% if variant == 'highlight-2-col' %}
         {% set _card_layout = _card_layout|merge({ responsive_columns: 2 }) %}
@@ -161,9 +177,6 @@
 {% if _link is not empty %}
   {% set _link_attributes = _link.attributes ? _link.attributes : create_attribute() %}
   {% set _link_attributes = _link_attributes.addClass(['mt-3-5', 'd-inline-block']) %}
-  {% if _variant == 'default-1-col' or _variant == 'default-2-col' or variant == 'default-3-col' %}
-    {% set _link_attributes = _link_attributes.addClass(['ps-3-5']) %}
-  {% endif %}
   {% include '@oe-bcl/bcl-link/link.html.twig' with _link|merge({
     attributes: _link_attributes,
     icon: _link.icon|merge({

package/templates/bcl-navbar/navbar.html.twig

@@ -45,26 +45,28 @@
   {{ attributes }}
 >
   <div class='container'>
-    {% if _brand is not empty %}
-      <a class='navbar-brand' href='{{ _brand.link }}'>
-      {%- if _brand.label is defined -%}
-        {{- _brand.label -}}
-      {%- else -%}
-        {% for logo in _brand.logos %}
-          <img
-            src='{{ logo.src }}'
-            {% if logo.alt is not empty %}
-            alt='{{ logo.alt }}'
-            {% endif %}
-            {% if logo.class is not empty %}
-            class='{{ logo.class }}'
-            {% endif %}
-          />
-        {% endfor %}
-      {%- endif -%}
-      </a>
-    {% endif %}
-    {% if not _disable_collapse %}
+  {% if _brand is not empty %}
+    <a class='navbar-brand' href='{{ _brand.link }}'>
+    {% for logo in _brand.logos %}
+      <img
+        src='{{ logo.src }}'
+        {% if logo.alt is not empty %}
+        alt='{{ logo.alt }}'
+        {% endif %}
+        {% if logo.class is not empty %}
+        class='{{ logo.class }}'
+        {% endif %}
+      />
+    {% endfor %}
+  {%- if _brand.label is defined -%}
+   <div class="h5 ms-4-5 d-none d-lg-inline-block">
+    {{- _brand.label -}}
+    </div>
+  {% endif %}
+    </a>
+  {% endif %}
+
+  {% if not _disable_collapse %}
     <button
       class='navbar-toggler'
       type='button'

package/templates/bcl-navigation/navigation.html.twig

@@ -1,8 +1,9 @@
+{% import _self as navigation %}
 {% spaceless %}
 
 {# Parameters:
   - pills (boolean) (default: false)
-  - tabs (boolean) (default: false)
+  - tabs (boolean) (default: false) - If tabs is set to true, the nav should also be set to true for accessibility reasons
   - vertical (boolean) (default: false)
   - full_width (boolean) (default: false)
   - alignment (string) (default: '')
@@ -17,131 +18,160 @@
         - active (boolean)
         - button (boolean) - set to button
         - content (string) - content for tab
+        - navigation (navigation Object) - set for multiple level or navigation, items inside is required
       }
     ]
 #}
 
-{% set _pills = pills|default(false) %}
-{% set _tabs = tabs|default(false) %}
-{% set _vertical = vertical|default(false) %}
-{% set _full_width = full_width|default(false) %}
-{% set _alignment = alignment|default('') %}
-{% set _id = id|default('') %}
-{% set _tabs_content = tabs_content|default(false) %}
-{% set _nav = nav|default(false) %}
-{% set _navbar = navbar|default(false) %}
-{% set _items = items|default([]) %}
+{# Define main macro #}
+{% macro render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) %}
+{% spaceless %}
+  {% import _self as navigation %}
 
-{% if _navbar %}
-  {% set _classes = ['navbar-nav'] %}
-{% else %}
-  {% set _classes = ['nav'] %}
-{% endif %}
-{% if _pills %}
-  {% set _classes = _classes|merge(['nav-pills']) %}
-{% endif %}
-{% if _tabs %}
-  {% set _classes = _classes|merge(['nav-tabs']) %}
-{% endif %}
-{% if _vertical %}
-  {% set _classes = _classes|merge(['flex-column']) %}
-{% endif %}
-{% if _full_width %}
-  {% set _classes = _classes|merge(['nav-fill']) %}
-{% endif %}
-{% if _alignment is not empty %}
-  {% set _classes = _classes|merge(['justify-content-' ~ _alignment]) %}
-{% endif %}
+  {% set _pills = pills|default(false) %}
+  {% set _tabs = tabs|default(false) %}
+  {% set _vertical = vertical|default(false) %}
+  {% set _full_width = full_width|default(false) %}
+  {% set _alignment = alignment|default('') %}
+  {% set _id = id|default('') %}
+  {% set _tabs_content = tabs_content|default(false) %}
+  {% set _nav = nav|default(false) %}
+  {% set _navbar = navbar|default(false) %}
+  {% set _items = items|default([]) %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
-{% endif %}
+  {% if _navbar %}
+    {% set _classes = ['navbar-nav'] %}
+  {% else %}
+    {% set _classes = ['nav'] %}
+  {% endif %}
+  {% if _pills %}
+    {% set _classes = _classes|merge(['nav-pills']) %}
+  {% endif %}
+  {% if _tabs %}
+    {% set _classes = _classes|merge(['nav-tabs']) %}
+  {% endif %}
+  {% if _vertical %}
+    {% set _classes = _classes|merge(['flex-column']) %}
+  {% endif %}
+  {% if _full_width %}
+    {% set _classes = _classes|merge(['nav-fill']) %}
+  {% endif %}
+  {% if _alignment is not empty %}
+    {% set _classes = _classes|merge(['justify-content-' ~ _alignment]) %}
+  {% endif %}
 
-{% if _id is not empty %}
-  {% set attributes = attributes.setAttribute('id', _id) %}
-{% endif %}
+  {% if attributes is empty %}
+    {% set attributes = create_attribute() %}
+  {% endif %}
 
-{% if not _nav and _tabs %}
-  {% set attributes = attributes.setAttribute('role', 'tablist') %}
-{% endif %}
+  {% if _id is not empty %}
+    {% set attributes = attributes.setAttribute('id', _id) %}
+  {% endif %}
 
-{% set attributes = attributes.addClass(_classes) %}
+  {% if _tabs %}
+    {% set attributes = attributes.setAttribute('role', 'tablist') %}
+  {% endif %}
+  {% set attributes = attributes.addClass(_classes) %}
 
-{% if _nav %}
-<nav
-  {{ attributes }}
->
-{% else %}
-<ul
-  {{ attributes }}
->
-{% endif %}
-  {% if _items is not empty and _items is iterable %}
-    {% for _item in _items %}
-      {% set _nav_class = 'nav-item' %}
-      {% if _item.dropdown %}
-        {% set _nav_class = _nav_class ~ ' dropdown' %}
-        {% set _item = _item|merge({remove_wrapper: true}) %}
-      {% endif %}
-      {% if _item.dropdown %}
-        {% set _item_classes = [] %}
-      {% else %}
-        {% set _item_classes = ['nav-link'] %}
-      {% endif %}
-      {% if _item.active %}
-        {% set _item_classes = _item_classes|merge(['active']) %}
-      {% endif %}
-      {% if _item.attributes is empty %}
-        {% set _item = _item|merge({
-          attributes: create_attribute()
-        }) %}
-      {% endif %}
-      {% set _item = _item|merge({
-        attributes: _item.attributes.addClass(_item_classes),
-        clean_class: true}) %}
-      {% if not _nav %}
-      <li
-        class="{{ _nav_class }}"
-        {% if _tabs %}
-          role="presentation"
-        {% endif %}
-      >
-      {% endif %}
-      {% if _item.dropdown is defined %}
-        {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
-      {% elseif _item.button is defined %}
-        {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
-      {% else %}
-        {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
-      {% endif %}
-      {% if not _nav %}
-      </li>
-      {% endif %}
-    {% endfor %}
+  {% if _nav %}
+  <nav
+    {{ attributes }}
+  >
+  {% else %}
+  <ul
+    {{ attributes }}
+  >
   {% endif %}
-{% if _nav %}
-</nav>
-{% else %}
-</ul>
-{% endif %}
-{% if _tabs_content %}
-<div class="tab-content">
-  {%- block contents -%}
     {% if _items is not empty and _items is iterable %}
-      {% for _item in _items %}
-        {% if _item.content is not empty %}
-          {% set _content_class = 'tab-pane fade' %}
-          {% if _item.active %}
-            {% set _content_class = _content_class ~ ' show active' %}
+      {% for _item in items %}
+        {% set _nav_class = 'nav-item' %}
+        {% if _item.dropdown %}
+          {% set _nav_class = _nav_class ~ ' dropdown' %}
+          {% set _item = _item|merge({remove_wrapper: true}) %}
+        {% endif %}
+        {% if _item.dropdown %}
+          {% set _item_classes = [] %}
+        {% else %}
+          {% set _item_classes = ['nav-link'] %}
+        {% endif %}
+        {% if _item.active %}
+          {% set _item_classes = _item_classes|merge(['active']) %}
+        {% endif %}
+        {% if _item.attributes is empty %}
+          {% set _item = _item|merge({
+            attributes: create_attribute()
+          }) %}
+        {% endif %}
+        {% set _item = _item|merge({
+          attributes: _item.attributes.addClass(_item_classes),
+          clean_class: true}) %}
+        {% if not _nav %}
+        <li
+          class="{{ _nav_class }}"
+          {% if _tabs %}
+            role="tab"
           {% endif %}
-          <div class="{{ _content_class }}" id="{{ _item.target }}" role="tabpanel" aria-labelledby="{{ _item.id }}">
-            {{- _item.content -}}
-          </div>
+        >
+        {% elseif _tabs %}
+          {% set _item = _item|merge({
+            attributes: _item.attributes.setAttribute("role", "tab"),
+            }) 
+          %}
+        {% endif %}
+        {% if _item.dropdown is defined %}
+          {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
+        {% elseif _item.button is defined %}
+          {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
+        {% else %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+        {% endif %}
+        {% if _item.navigation is defined and _item.navigation.items is not empty and _item.navigation.items is iterable %}
+          {{ navigation.render(
+            _item.navigation.items,
+            _item.navigation.pills,
+            _item.navigation.tabs,
+            _item.navigation.tabs_content,
+            _item.navigation.vertical,
+            _item.navigation.full_width,
+            _item.navigation.alignment,
+            _item.navigation.id,
+            _item.navigation.nav,
+            _item.navigation.navbar,
+            _item.navigation.attributes
+            ) }}
+        {% endif %}
+        {% if not _nav %}
+        </li>
         {% endif %}
       {% endfor %}
     {% endif %}
-  {%- endblock -%}
-</div>
-{% endif %}
+  {% if _nav %}
+  </nav>
+  {% else %}
+  </ul>
+  {% endif %}
+  {% if _tabs_content %}
+  <div class="tab-content">
+    {%- block contents -%}
+      {% if _items is not empty and _items is iterable %}
+        {% for _item in _items %}
+          {% if _item.content is not empty %}
+            {% set _content_class = 'tab-pane fade' %}
+            {% if _item.active %}
+              {% set _content_class = _content_class ~ ' show active' %}
+            {% endif %}
+            <div class="{{ _content_class }}" id="{{ _item.target }}" role="tabpanel" aria-labelledby="{{ _item.id }}">
+              {{- _item.content -}}
+            </div>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+    {%- endblock -%}
+  </div>
+  {% endif %}
+{% endspaceless %}
+{% endmacro %}
+
+{{ navigation.render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) }}
 
 {% endspaceless %}

package/templates/bcl-offcanvas/offcanvas.html.twig

@@ -41,6 +41,10 @@
   {% set _aria_labelled = _title.id|default('') %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _aria_labelled is defined and _aria_labelled is not empty %}
   {% set attributes = attributes.setAttribute('aria-labelledby', _aria_labelled) %}
 {% endif %}

package/templates/bcl-page/page.html.twig

@@ -0,0 +1,64 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block sidebar %}
+  {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
+{% endblock %}
+
+{% block content %}
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
+  a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
+  posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
+  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
+  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
+  </p>
+  <h3 id="item-1" class="fw-bold my-4">Section 1</h3>
+  {% if featured_item %}
+    {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with featured_item only %}
+  {% endif %}
+
+  {% if page_banner %}
+    {% include '@oe-bcl/bcl-banner/banner.html.twig' with page_banner only %}
+  {% endif %}
+
+  {% if listing %}
+    {% include '@oe-bcl/bcl-listing/listing.html.twig' with listing only %}
+  {% endif %}
+
+  <h3 id="item-2" class="fw-bold my-4">Section 2</h3>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
+  a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
+  posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
+  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
+  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
+  </p>
+
+  {% if blockquote %}
+    {% include '@oe-bcl/bcl-blockquote/blockquote.html.twig' with blockquote only %}
+  {% endif %}
+  {% if accordion %}
+    {% include '@oe-bcl/bcl-accordion/accordion.html.twig' with accordion only %}
+  {% endif %}
+  {% if timeline %}
+    {% include '@oe-bcl/bcl-timeline/timeline.html.twig' with timeline only %}
+  {% endif %}
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
+  a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
+  posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
+  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
+  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
+  </p>
+
+  <h3 id="item-3" class="fw-bold my-4">Section 3</h3>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
+  a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
+  posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
+  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
+  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
+  </p>
+
+  {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
+  {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}
+{% endblock %}

package/templates/bcl-pagination/pagination.html.twig

@@ -12,6 +12,7 @@
       - path (string)
       - label (string)
       - disabled (boolean)
+      - aria_label (string)
       - icon (Icon component)
     }
   - next (object)
@@ -19,6 +20,7 @@
       - path (string)
       - label (string)
       - disabled (boolean)
+      - aria_label (string)
       - icon (Icon component)
     }
   - items (array of objects)
@@ -47,11 +49,15 @@
   {% set _classes = _classes ~ ' justify-content-' ~ _alignment %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _aria_label is not empty %}
   {% set attributes = attributes.setAttribute('aria-label', aria_label) %}
 {% endif %}
 {% if _extra_classes is not empty %}
-{% set _class = _class ~ ' ' ~ _extra_classes %}
+  {% set _class = _class ~ ' ' ~ _extra_classes %}
 {% endif %}
 
 <nav
@@ -71,6 +77,9 @@
         tabindex="-1"
         aria-disabled="true"
         {% endif %}
+        {%- if _prev.aria_label -%}
+        aria-label="{{ _prev.aria_label }}"
+        {%- endif -%}
       >
       {%- if _enable_icon -%}
         {%- if _prev.icon is not empty -%}
@@ -123,6 +132,9 @@
         tabindex="-1"
         aria-disabled="true"
         {% endif %}
+        {%- if _next.aria_label -%}
+        aria-label="{{ _next.aria_label }}"
+        {%- endif -%}
       >
       {%- if _enable_icon -%}
         {%- if _next.icon is not empty -%}

package/templates/bcl-placeholder/placeholder.html.twig

@@ -0,0 +1,43 @@
+{% spaceless %}
+
+{# Parameters:
+  - width (int) (default: 0) - between 0-100
+  - variant (string) (default: '')
+    - options : ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+  - size (string) (default: '')
+    - options : ["xs", "lg"]
+  - animation (string) (default: '')
+    - options : ["glow", "wave"]
+#}
+
+{% set _width = width|default(0) %}
+{% set _variant = variant|default('') %}
+{% set _size = size|default('') %}
+{% set _animation = animation|default('') %}
+{% set _classes = ['placeholder'] %}
+
+{% if _size is not empty %}
+  {% set _classes = _classes|merge(['placeholder-' ~ _size]) %}
+{% endif %}
+
+{% if _variant is not empty %}
+  {% set _classes = _classes|merge(['bg-' ~ _variant]) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+{% set attributes = attributes.setAttribute('style', 'width: ' ~ _width ~ '%;') %}
+
+{% if _animation is not empty %}
+  <p class="placeholder-{{ _animation }}">
+{% endif %}
+<span {{- attributes -}} >
+</span>
+{% if _animation is not empty %}
+  </p>
+{% endif %}
+
+{% endspaceless %}

package/templates/bcl-progress/progress.html.twig

@@ -32,6 +32,10 @@
   {% set _classes = _classes ~ ' bg-' ~ _variant %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(['progress']) %}
 
 {% if _bar_label is empty %} 
@@ -49,6 +53,7 @@
     role="progressbar"
     style="width: {{ _progress }}%"
     aria-valuenow="{{ _progress }}"
+    aria-label="{{ _progress }}"
     aria-valuemin="{{ _min }}"
     aria-valuemax="{{ _max }}"
   >

package/templates/bcl-recent-activities/recent-activities.html.twig

@@ -23,6 +23,10 @@
 
 {% set _activities = activities|default([]) %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 <div 
   {{ attributes }}
 >