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

packages/web-twig/src/Resources/components/Link/Link.stories.twig

@@ -0,0 +1,11 @@
+{% extends 'layout/default.html.twig' %}
+
+{% block content %}
+
+{# Link Default #}
+{% include '@components/Link/stories/LinkDefault.twig' %}
+
+{# Link Colors #}
+{% include '@components/Link/stories/LinkColors.twig' %}
+
+{% endblock %}

packages/web-twig/src/Resources/components/Link/README.md

@@ -5,7 +5,7 @@ This is Twig implementation of the [Link] component.
 Basic example usage:
 
 ```twig
-<Link href="#" />Link<Link />
+<Link href="#">Link</Link>
 ```
 
 Advanced example usage:

packages/web-twig/src/Resources/components/Link/stories/LinkColors.twig

@@ -0,0 +1,12 @@
+{% set colors = [ "primary", "secondary", "inverted" ] %}
+
+<section class="docs-Section">
+
+    <h2 class="docs-Heading">Colors</h2>
+
+    {% for color in colors %}
+        <p{% if color is same as('inverted') %} class="docs-Box"{% endif %}>
+            <Link href="#" color={color}>Link {{ color }}</Link>
+        </p>
+    {% endfor %}
+</section>

packages/web-twig/src/Resources/components/Link/stories/LinkDefault.twig

@@ -0,0 +1,37 @@
+<section class="docs-Section">
+
+    <h2 class="docs-Heading">Default</h2>
+
+    <p>
+        <Link href="#">
+            Link
+        </Link>
+    </p>
+
+    <p>
+        <Link
+            href="#"
+            color="primary"
+            isUnderlined
+        >
+            Primary Underlined Link
+        </Link>
+    </p>
+
+    <p>
+        <Link
+            href="#"
+            color="primary"
+            isDisabled
+        >
+            Primary Disabled Link
+        </Link>
+    </p>
+
+    <p>
+        <Link href="https://www.example.com/" target="_blank" title="Warning">
+            ⚠️
+        </Link>
+    </p>
+
+</section>