Feat(web-twig): Introduce ActionLayout component #DS-1311

lmc-eu · Jun 24, 2024 · 302fb6c · 302fb6c
1 parent e0da22e
commit 302fb6c
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 0 deletions.
diff --git a/packages/web-twig/src/Resources/components/UNSTABLE_ActionLayout/README.md b/packages/web-twig/src/Resources/components/UNSTABLE_ActionLayout/README.md
@@ -0,0 +1,4 @@
+# UNSTABLE ActionLayout
+
+⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
+Please use it with caution.
diff --git a/...eb-twig/src/Resources/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.stories.twig b/...eb-twig/src/Resources/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.stories.twig
@@ -0,0 +1,9 @@
+{% extends 'layout/plain.html.twig' %}
+
+{% block content %}
+
+    <DocsSection title="Default" stackAlignment="stretch">
+        {% include '@components/UNSTABLE_ActionLayout/stories/ActionLayoutDefault.twig' %}
+    </DocsSection>
+
+{% endblock %}
diff --git a/packages/web-twig/src/Resources/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.twig b/packages/web-twig/src/Resources/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.twig
@@ -0,0 +1,6 @@
+{# Class names #}
+{%- set _rootClassName = _spiritClassPrefix ~ 'UNSTABLE_ActionLayout' -%}
+
+<div class="{{ _rootClassName }}">
+    {% block content %}{% endblock %}
+</div>
diff --git a/...ources/components/UNSTABLE_ActionLayout/__tests__/__fixtures__/UNSTABLE_ActionLayout.twig b/...ources/components/UNSTABLE_ActionLayout/__tests__/__fixtures__/UNSTABLE_ActionLayout.twig
@@ -0,0 +1,5 @@
+<!-- Render with all props -->
+<UNSTABLE_ActionLayout>
+    <ButtonLink href="#" color="primary">Primary Button</ButtonLink>
+    <ButtonLink href="#" color="secondary">Secondary Button</ButtonLink>
+</UNSTABLE_ActionLayout>
diff --git a/...onents/UNSTABLE_ActionLayout/__tests__/__snapshots__/UNSTABLE_ActionLayout.twig.snap.html b/...onents/UNSTABLE_ActionLayout/__tests__/__snapshots__/UNSTABLE_ActionLayout.twig.snap.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<!-- Render with all props --><html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+    </title>
+  </head>
+  <body>
+    <div class="UNSTABLE_ActionLayout">
+      <a class="Button Button--primary Button--medium" href="#">Primary Button</a> <a class="Button Button--secondary Button--medium" href="#">Secondary Button</a>
+    </div>
+  </body>
+</html>
diff --git a/.../web-twig/src/Resources/components/UNSTABLE_ActionLayout/stories/ActionLayoutDefault.twig b/.../web-twig/src/Resources/components/UNSTABLE_ActionLayout/stories/ActionLayoutDefault.twig
@@ -0,0 +1,4 @@
+<UNSTABLE_ActionLayout>
+    <ButtonLink href="#" color="primary">Primary Button</ButtonLink>
+    <ButtonLink href="#" color="secondary">Secondary Button</ButtonLink>
+</UNSTABLE_ActionLayout>
diff --git a/packages/web-twig/src/Resources/twig-components/unstable_ActionLayout.twig b/packages/web-twig/src/Resources/twig-components/unstable_ActionLayout.twig
@@ -0,0 +1 @@
+{% extends '@spirit/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.twig' %}
diff --git a/...o-components-compare.spec.ts-snapshots/unstable-actionlayout-chromium-linux.png b/...o-components-compare.spec.ts-snapshots/unstable-actionlayout-chromium-linux.png
diff --git a/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png b/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png