added status() and status_dot() macros (#98)

kevinpapst · Jul 2, 2022 · f6ea2f4 · f6ea2f4
1 parent 881273f
commit f6ea2f4
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 0 deletions.
diff --git a/docs/components-status-dot.md b/docs/components-status-dot.md
@@ -0,0 +1,35 @@
+# Components
+
+This theme ships some components (as twig macros) that hide the complexity of rendering the same elements over and over again with the correct HTML.
+
+## Status Dot
+
+Status Dot has been implemented to simplify the use of the Tabler [Status Dot component](https://preview.tabler.io/docs/statuses.html#status-indicator) 
+### Parameters
+`status_dot()` macro, waits for 1 parameter:
+
+| Parameter | Description                |   Type    | Default |
+|:---------:|:---------------------------|:---------:|:-------:|
+|  options  | [Options](#Options) object | `object`  |  `{}`   |
+
+#### Options
+| Parameter  | Description                      |   Type    |    Default     |
+|:----------:|----------------------------------|:---------:|:--------------:|
+|   color    | Color of the indicator           | `string`  |    `green`     |
+|  animated  | Set if the indicator is animated | `boolean` |     `true`     |
+| extraClass | Allow to add extra classes       | `string`  | _empty string_ |
+                            
+### Usage
+
+```twig
+{% from '@Tabler/components/status_dot.html.twig' import status_dot %}
+
+{% set options = {'color': 'pink', 'animated': true} %}
+{{ status_dot(options) }}
+```
+### Preview
+![grafik](https://user-images.githubusercontent.com/3634653/176974526-35c6ca21-1d66-450a-b7d0-66c5cff41ed1.png)
+
+## Next steps
+
+Please go back to the [Tabler bundle documentation](index.md) to find out more about using the theme.
diff --git a/docs/components-status.md b/docs/components-status.md
@@ -0,0 +1,38 @@
+# Components
+
+This theme ships some components (as twig macros) that hide the complexity of rendering the same elements over and over again with the correct HTML.
+
+## Status
+
+Status has been implemented to simplify the use of the Tabler [Status component](https://preview.tabler.io/docs/statuses.html) 
+### Parameters
+`status()` macro, waits for 2 parameters:
+
+| Parameter | Description                |   Type    | Default |
+|:---------:|:---------------------------|:---------:|:-------:|
+|  text     | Text to show in the status | `string`  |     |
+|  options  | [Options](#Options) object | `object`  |  `{}`   |
+
+#### Options
+| Parameter  | Description                      |   Type    |    Default     |
+|:----------:|----------------------------------|:---------:|:--------------:|
+|   color    | Color of the status              | `string`  |    `green`     |
+|  lite      | Set if the status should use the lite display | `boolean` |     `false`     |
+|  with_dot      | Set if the status should use a dot | `boolean` |     `false`     |
+|  animated  | Set if the status dot is animated    | `boolean` |     `true`     |
+| extraClass | Allow to add extra classes       | `string`  | _empty string_ |
+                            
+### Usage
+
+```twig
+{% from '@Tabler/components/status.html.twig' import status %}
+
+{% set options = {'color': 'success', 'with_dot': true,'animated': true, 'lite': false, 'extraClass': 'me-3'} %}
+{{ status('Demo', options) }}
+```
+### Preview
+![grafik](https://user-images.githubusercontent.com/3634653/176974136-b2ef1703-a9f4-4fe4-b3ac-85fb37f6e63b.png)
+
+## Next steps
+
+Please go back to the [Tabler bundle documentation](index.md) to find out more about using the theme.
diff --git a/docs/index.md b/docs/index.md
@@ -15,6 +15,8 @@ Components (Twig macros):
 * [Buttons](components-buttons.md)
 * [Timeline](components-timeline.md)
 * [Breadcrumb](components-breadcrumb.md)
+* [Status](components-status.md)
+* [Status Dot](components-status-dot.md)
 * [Status indicator](components-status-indicator.md)
 * [Steps](components-steps.md)
 * [Callout](components-callout.md)

diff --git a/templates/components/status.html.twig b/templates/components/status.html.twig
@@ -0,0 +1,16 @@
+{% macro status(text, options) %}
+    {% set _color = options.color ?? 'green' %}
+    {% set _animated = options.animated ?? true %}
+    {% set _lite = options.lite is defined ? options.lite  : false %}
+    {% set _with_dot = options.with_dot is defined ? options.with_dot  : false %}
+    {% set _extraClass = options.extraClass ?? '' %}
+
+    {%- apply spaceless -%}
+        <span class="status status-{{ _color }} {{ _lite ? 'status-lite' : '' }} {{ _extraClass }}">
+        {% if _with_dot %}
+            <span class="status-dot {{ _animated ? 'status-dot-animated' : '' }}"></span>
+        {% endif %}
+            {{ text }}
+        </span>
+    {%- endapply -%}
+{% endmacro %}
diff --git a/templates/components/status_dot.html.twig b/templates/components/status_dot.html.twig
@@ -0,0 +1,7 @@
+{% macro status_dot(options) %}
+    {% set _color = options.color ?? 'green' %}
+    {% set _animated = options.animated ?? true %}
+    {% set _extraClass = options.extraClass ?? '' %}
+
+    <span class="status-dot status-{{ _color }} {% if _animated %}status-dot-animated{% endif %}"></span>
+{% endmacro %}