From de38e8d53b2dc471030f8720f6abc9453978ee4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Mon, 4 Mar 2024 23:43:42 -0500
Subject: [PATCH] Docs(web-twig): Show Bordered Alert Feature Flag in Demo
 #DS-1156

---
 .../components/Alert/Alert.stories.twig         |  6 ++++++
 .../components/Alert/stories/AlertBordered.twig | 17 +++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 packages/web-twig/src/Resources/components/Alert/stories/AlertBordered.twig

diff --git a/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig b/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig
index 78f1d2f208..97d06c369d 100644
--- a/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig
+++ b/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig
@@ -14,4 +14,10 @@
         {% include '@components/Alert/stories/AlertIcons.twig' %}
     </DocsSection>
 
+    <div class="spirit-feature-alert-enable-bordered">
+        <DocsSection title="Feature Flag: Bordered Alert" stackAlignment="stretch">
+            {% include '@components/Alert/stories/AlertBordered.twig' %}
+        </DocsSection>
+    </div>
+
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Alert/stories/AlertBordered.twig b/packages/web-twig/src/Resources/components/Alert/stories/AlertBordered.twig
new file mode 100644
index 0000000000..7c47326fdf
--- /dev/null
+++ b/packages/web-twig/src/Resources/components/Alert/stories/AlertBordered.twig
@@ -0,0 +1,17 @@
+<Alert color="success">
+  We sent you an activation link to email <strong>spirit@lmc.eu</strong>. See <a href="./" class="link-underlined">FAQ</a> for more info.
+</Alert>
+
+<Alert color="informative">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+    perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+    provident unde. Eveniet, iste, molestiae? See <a href="./" class="link-underlined">FAQ</a> for more info.
+</Alert>
+
+<Alert color="warning">
+  <strong>Warning!</strong> Data update failed due to missing internet connection. See <a href="./" class="link-underlined">FAQ</a> for more info.
+</Alert>
+
+<Alert color="danger">
+  Data update failed due to missing internet connection. See <a href="./" class="link-underlined">FAQ</a> for more info.
+</Alert>