Refactor(web): Update UNSTABLE_EmptyState according to design #DS-1311

lmc-eu · Jun 24, 2024 · e0da22e · e0da22e
1 parent 17beca2
commit e0da22e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 84 deletions.
diff --git a/packages/web/src/scss/components/UNSTABLE_EmptyState/_UNSTABLE_EmptyState.scss b/packages/web/src/scss/components/UNSTABLE_EmptyState/_UNSTABLE_EmptyState.scss
@@ -5,43 +5,19 @@
 .UNSTABLE_EmptyState {
     display: flex;
     flex-direction: column;
-    gap: theme.$root-gap;
     align-items: center;
-    padding-block: theme.$root-padding-block;
+    padding: theme.$root-padding;
+    text-align: center;
 
     @include breakpoint.up(map.get(theme.$breakpoints, desktop)) {
-        padding-block: theme.$root-padding-block-desktop;
+        padding: theme.$root-padding-desktop;
     }
 }
 
-.UNSTABLE_EmptyState__heading {
-    margin-bottom: theme.$heading-margin-bottom;
-}
-
-.UNSTABLE_EmptyState__buttons {
-    display: flex;
-    flex-direction: column;
-    gap: theme.$buttons-gap;
-    justify-content: center;
-    width: 100%;
-
-    @include breakpoint.up(map.get(theme.$breakpoints, tablet)) {
-        flex-direction: row;
-    }
-}
-
-.UNSTABLE_EmptyState__wrapper {
+.UNSTABLE_EmptyState__section {
     display: flex;
     flex-direction: column;
-    gap: theme.$wrapper-gap;
-    align-self: stretch;
     align-items: center;
-}
-
-.UNSTABLE_EmptyState__icon {
-    display: flex;
-    align-items: center;
-    padding: theme.$icon-padding;
-    border: 1px solid theme.$icon-border-color;
-    border-radius: theme.$icon-border-radius;
+    width: 100%;
+    max-width: 400px;
 }
diff --git a/packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss b/packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss
@@ -1,12 +1,6 @@
 @use '@tokens' as tokens;
 
 $breakpoints: tokens.$breakpoints;
-$root-gap: tokens.$space-700;
-$root-padding-block: tokens.$space-800;
-$root-padding-block-desktop: tokens.$space-900;
-$heading-margin-bottom: tokens.$space-500;
+$root-padding: tokens.$space-1000 tokens.$space-700;
+$root-padding-desktop: tokens.$space-1000 tokens.$space-800;
 $buttons-gap: tokens.$space-600;
-$wrapper-gap: tokens.$space-600;
-$icon-padding: tokens.$space-500;
-$icon-border-radius: tokens.$radius-200;
-$icon-border-color: tokens.$border-secondary-default;
diff --git a/packages/web/src/scss/components/UNSTABLE_EmptyState/index.html b/packages/web/src/scss/components/UNSTABLE_EmptyState/index.html
@@ -4,59 +4,50 @@
   <h2 class="docs-Heading">Default</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
-      <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);">
-        <div class="Stack UNSTABLE_EmptyState__section">
-          <div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
-            <svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-              <use href="/assets/icons/svg/sprite.svg#search"></use>
-            </svg>
-          </div>
-        </div>
-        <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState__section"
-             style="--stack-spacing: var(--spirit-space-500);"
-        >
-          <h2 class="typography-heading-xsmall-text">Headline</h2>
-          <p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common
-            placeholder text used to demonstrate the graphic elements
-          </p>
-        </div>
-        <div class="Stack UNSTABLE_EmptyState__section">
-          <div class="UNSTABLE_EmptyState__buttons">
-            <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"><a href="#" class="link-primary">Link to something</a>
+    <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);">            <div class="Stack UNSTABLE_EmptyState__section">                <div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
+      <svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+        <use href="/assets/icons/svg/sprite.svg#search"></use>
+      </svg>
+    </div>
+    </div>
+      <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState__section" style="--stack-spacing: var(--spirit-space-500);">
+        <h2 class="typography-heading-xsmall-text">Headline</h2>
+        <p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
+      </div>
+      <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">
+        <a href="#" class="link-primary">Link to something</a>
+      </div>
+    </div>
 
-      <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);">
-        <div class="Stack UNSTABLE_EmptyState__section">
-          <div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
-            <svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-              <use href="/assets/icons/svg/sprite.svg#search"></use>
-            </svg>
-          </div>
+    <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);">
+      <div class="Stack UNSTABLE_EmptyState__section">
+        <div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
+          <svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+            <use href="/assets/icons/svg/sprite.svg#search"></use>
+          </svg>
         </div>
-        <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState__section"
-             style="--stack-spacing: var(--spirit-space-500);"
-        >
-          <h2 class="typography-heading-xsmall-text">Headline</h2>
-          <p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common
-            placeholder text used to demonstrate the graphic elements
-          </p>
-        </div>
-        <div class="Stack UNSTABLE_EmptyState__section">
-          <div class="UNSTABLE_EmptyState__buttons">
-            <a class="Button Button--primary Button--medium" href="#"> Action
-            </a>
-          </div>
+      </div>
+      <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState__section" style="--stack-spacing: var(--spirit-space-500);">
+        <h2 class="typography-heading-xsmall-text">Headline</h2>
+        <p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
+      </div>
+      <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>
 
-      <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);">
-        Custom content only
-      </div>
+    <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);">
+      Custom content only
+    </div>
 
   </div>
 </section>