Docs(web-twig): Introduce Tag story refs #DS-247

lmc-eu · Apr 3, 2023 · bb2dfbb · bb2dfbb
1 parent bdecd53
commit bb2dfbb
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/packages/web-twig/src/Resources/components/Tag/Tag.stories.twig b/packages/web-twig/src/Resources/components/Tag/Tag.stories.twig
@@ -0,0 +1,8 @@
+{% extends 'layout/default.html.twig' %}
+
+{% block content %}
+
+{# Tag Default #}
+{% include '@components/Tag/stories/TagDefault.twig' %}
+
+{% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Tag/stories/TagDefault.twig b/packages/web-twig/src/Resources/components/Tag/stories/TagDefault.twig
@@ -0,0 +1,20 @@
+{% set colors = [ "neutral", "success", "informative", "warning", "danger" ] %}
+{% set sizes = [ "xsmall", "small", "medium", "large", "xlarge" ] %}
+
+<section class="docs-Section">
+    <Grid cols="1" tablet="3" desktop="5">
+        {% for size in sizes %}
+            <div class="mb-700">
+                <h3 class="docs-Heading">Size {{ size }}</h3>
+                {% for color in colors %}
+                    <div class="my-600">
+                        <Tag color={color} size={size} isSubtle>Tag {{ color }}</Tag>
+                    </div>
+                    <div class="my-600">
+                        <Tag color={color} size={size}>Tag {{ color }}</Tag>
+                    </div>
+                {% endfor %}
+            </div>
+        {% endfor %}
+    </Grid>
+</section>