From 73ad68f68da08af604e01da819d507e36caed256 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Fri, 21 Jun 2024 11:34:32 +0200
Subject: [PATCH] fixup! Refactor(web-twig): Update UNSTABLE_EmptyState
 according to design #DS-1311

---
 .../__fixtures__/UNSTABLE_EmptyState.twig     | 14 ++++++++-----
 .../UNSTABLE_EmptyState.twig.snap.html        |  6 ++++--
 .../stories/EmptyStateDefault.twig            | 20 +++++++++++--------
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/__tests__/__fixtures__/UNSTABLE_EmptyState.twig b/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/__tests__/__fixtures__/UNSTABLE_EmptyState.twig
index 8bcc36f6b2..091e02505e 100644
--- a/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/__tests__/__fixtures__/UNSTABLE_EmptyState.twig
+++ b/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/__tests__/__fixtures__/UNSTABLE_EmptyState.twig
@@ -9,13 +9,17 @@
         <Heading
             elementType="h2"
             size="xsmall"
-        >Headline</Heading>
+        >
+            Headline
+        </Heading>
         <Text color="secondary">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</Text>
     </UNSTABLE_EmptyStateSection>
-    <UNSTABLE_ActionLayout>
-        <ButtonLink color="primary" href="#">Action</ButtonLink>
-        <ButtonLink color="secondary" href="#">Action</ButtonLink>
-    </UNSTABLE_ActionLayout>
+    <UNSTABLE_EmptyStateSection>
+        <UNSTABLE_ActionLayout>
+            <ButtonLink color="primary" href="#">Action</ButtonLink>
+            <ButtonLink color="secondary" href="#">Action</ButtonLink>
+        </UNSTABLE_ActionLayout>
+    </UNSTABLE_EmptyStateSection>
     <UNSTABLE_EmptyStateSection>
         <Link href="#">Link to something</Link>
     </UNSTABLE_EmptyStateSection>
diff --git a/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/__tests__/__snapshots__/UNSTABLE_EmptyState.twig.snap.html b/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/__tests__/__snapshots__/UNSTABLE_EmptyState.twig.snap.html
index b9c7ba5d37..c8e9d2caca 100644
--- a/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/__tests__/__snapshots__/UNSTABLE_EmptyState.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/__tests__/__snapshots__/UNSTABLE_EmptyState.twig.snap.html
@@ -25,8 +25,10 @@ <h2 class="typography-heading-xsmall-text">
         </p>
       </div>
 
-      <div class="UNSTABLE_ActionLayout">
-        <a class="Button Button--primary Button--medium" href="#">Action</a> <a class="Button Button--secondary Button--medium" href="#">Action</a>
+      <div class="Stack UNSTABLE_EmptyState__section">
+        <div class="UNSTABLE_ActionLayout">
+          <a class="Button Button--primary Button--medium" href="#">Action</a> <a class="Button Button--secondary Button--medium" href="#">Action</a>
+        </div>
       </div>
 
       <div class="Stack UNSTABLE_EmptyState__section">
diff --git a/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/stories/EmptyStateDefault.twig b/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/stories/EmptyStateDefault.twig
index f22a4c8f33..e6ffc02065 100644
--- a/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/stories/EmptyStateDefault.twig
+++ b/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/stories/EmptyStateDefault.twig
@@ -11,10 +11,12 @@
             >Headline</Heading>
             <Text color="secondary">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</Text>
         </UNSTABLE_EmptyStateSection>
-        <UNSTABLE_ActionLayout>
-            <ButtonLink color="primary" href="#">Action</ButtonLink>
-            <ButtonLink color="secondary" href="#">Action</ButtonLink>
-        </UNSTABLE_ActionLayout>
+        <UNSTABLE_EmptyStateSection>
+            <UNSTABLE_ActionLayout>
+                <ButtonLink color="primary" href="#">Action</ButtonLink>
+                <ButtonLink color="secondary" href="#">Action</ButtonLink>
+            </UNSTABLE_ActionLayout>
+        </UNSTABLE_EmptyStateSection>
         <UNSTABLE_EmptyStateSection>
             <Link href="#">Link to something</Link>
         </UNSTABLE_EmptyStateSection>
@@ -33,10 +35,12 @@
             >Headline</Heading>
             <Text color="secondary">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</Text>
         </UNSTABLE_EmptyStateSection>
-        <UNSTABLE_ActionLayout>
-            <ButtonLink color="primary" href="#">Action</ButtonLink>
-            <ButtonLink color="secondary" href="#">Action</ButtonLink>
-        </UNSTABLE_ActionLayout>
+        <UNSTABLE_EmptyStateSection>
+            <UNSTABLE_ActionLayout>
+                <ButtonLink color="primary" href="#">Action</ButtonLink>
+                <ButtonLink color="secondary" href="#">Action</ButtonLink>
+            </UNSTABLE_ActionLayout>
+        </UNSTABLE_EmptyStateSection>
     </UNSTABLE_EmptyState>
 
     <UNSTABLE_EmptyState spacing="space-700">