[progress-bar] Add progress_background

Author: allsoftware-florian

docs/components-progress-bar.md

@@ -117,6 +117,37 @@ Progress Bars has been implemented to simplify the use of the Progress Bar, with
 ], {height: '20px'}) }}
 ```
 
+## Progress Background
+
+### Parameters
+`progress_background()` macro, waits for 1 parameter:
+
+| Parameter | Description                   |   Type   | Default |
+|:---------:|:------------------------------|:--------:|:-------:|
+|  options  | [Options](#Option) object     | `object` |  `{}`   |
+
+#### Option
+| Parameter | Description                                               |   Type   |    Default     |
+|:---------:|-----------------------------------------------------------|:--------:|:--------------:|
+|   color   | Color of the progress (red, blue, ...)                    | `string` |  `primary-lt`  |                                  
+|   width   | Width in percent of the progress (10, 15, 55)             | `number` |      `0`       |                                        
+|   text    | Text of the progress                                      | `string` | *empty string* |                                        
+|   value   | Value text displayed                                      | `string` | *empty string* |                                
+|   attr    | Additional raw HTML attributes (`data-*`, `aria-*`, etc.) |  object  |      `{}`      |
+
+
+### Usage
+
+```twig
+{% from '@Tabler/components/progress_bar.html.twig' import progress_background %}
+
+{{ progress_background({width : 65, text: 'Poland'}) }}
+{{ progress_background({width : 35, text: 'Germany'}) }}
+{{ progress_background({width : 28, text: 'United Stated'}) }}
+{{ progress_background({width : 20, text: 'United Kingdom'}) }}
+{{ progress_background({width : 15, text: 'France'}) }}
+```
+
 ## Next steps
 
 Please go back to the [Tabler bundle documentation](index.md) to find out more about using the theme.

templates/components/progress_bar.html.twig

@@ -163,3 +163,34 @@
         </div>
     </div>
 {%- endmacro %}
+
+{% macro progress_background(options = {}) -%}
+    {% from '@Tabler/includes/utils.html.twig' import attr_to_html %}
+
+    {% set _color = options.color ?? 'primary-lt' %}
+    {% set _width = options.width ?? 0 %}
+    {% set _text = options.text ?? '' %}
+    {% set _value = options.value|default(_width ~ '%') %}
+    {% set _attr = options.attr ?? {} %}
+
+    {% set progressBarClasses = ['progress-bar'] %}
+
+    {% if _color is not empty %}
+        {% set progressBarClasses = progressBarClasses|merge(['bg-' ~ _color]) %}
+    {% endif %}
+
+    <div
+        class="progressbg"
+        {{ attr_to_html(_attr) }}
+    >
+        <div class="progress progressbg-progress">
+            <div class="{{ progressBarClasses|join(' ') }}" style="width: {{ _width }}%"></div>
+        </div>
+        {% if _text is not empty %}
+            <div class="progressbg-text">{{ _text }}</div>
+        {% endif %}
+        {% if _value is not empty %}
+            <div class="progressbg-value">{{ _value }}</div>
+        {% endif %}
+    </div>
+{%- endmacro %}