Merge pull request #1915 from Kajabi/refactor/empty-state-update

Empty State - Style Update and Prop Deprecation
Kajabi · Aug 5, 2024 · 848de21 · 848de21
2 parents d8e410b + 56fe7c4
commit 848de21
Show file tree

Hide file tree

Showing 10 changed files with 238 additions and 224 deletions.
diff --git a/docs/app/views/examples/components/empty_state/_preview.html.erb b/docs/app/views/examples/components/empty_state/_preview.html.erb
@@ -8,12 +8,12 @@
 <% end %>
 
 <h3>With Icon and Compact</h3>
-<p> Compact variants, with less top and bottom padding, are useful for smaller contexts.</p>
+<p> Compact variants, with a smaller icon, are useful for smaller contexts.</p>
 <%= sage_component SageEmptyState, {
   icon: "bold",
   title: "Title for state, compact variety",
   text: "Text to appear below. Lorem ipsum dolor sit amet consectituor.",
-  scope: "compact",
+  size: "compact",
 } do %>
   <p>Other stuff such as buttons...</p>
 <% end %>
@@ -26,61 +26,3 @@
 } do %>
   <p>Other stuff such as buttons...</p>
 <% end %>
-
-<h3>Page Scope and Graphic</h3>
-<%= sage_component SageEmptyState, {
-  title: "Create your first Email Campaign",
-  graphic: image_tag("empty-state-lg.svg", alt: ""),
-  scope: "page",
-} do %>
-  <% content_for :sage_empty_state_text do %>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Elit arcu volutpat cursus ultricies ac, ultricies.
-      Platea sed nibh molestie ut.
-    </p>
-  <% end %>
-  <% content_for :sage_empty_state_actions do %>
-    <%= sage_component SageButtonGroup, { gap: :sm } do %>
-      <%= sage_component SageButton, {
-        attributes: { href: "#" },
-        style: "primary",
-        value: "Create Email Campaigns",
-      } %>
-      <%= sage_component SageButton, {
-        attributes: { href: "#" },
-        style: "secondary",
-        subtle: true,
-        value: "Learn More",
-      } %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<h3>Page Scope and Graphic with Video</h3>
-<%= sage_component SageEmptyState, {
-  title: "Create your first Email Campaign",
-  graphic: image_tag("empty-state-lg.svg", alt: ""),
-  scope: "page",
-} do %>
-  <% content_for :sage_empty_state_text do %>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Elit arcu volutpat cursus ultricies ac, ultricies.
-      Platea sed nibh molestie ut.
-    </p>
-  <% end %>
-  <% content_for :sage_empty_state_actions do %>
-    <%= sage_component SageButton, {
-      attributes: { href: "#" },
-      style: "primary",
-      value: "Create Email Campaigns",
-    } %>
-    <%= sage_component SageButton, {
-      attributes: { href: "#" },
-      style: "secondary",
-      subtle: true,
-      value: "Learn More",
-    } %>
-  <% end %>
-<% end %>
diff --git a/docs/app/views/examples/components/empty_state/_props.html.erb b/docs/app/views/examples/components/empty_state/_props.html.erb
@@ -1,6 +1,6 @@
 <tr>
   <td><%= md('`center_vertical`') %></td>
-  <td><%= md('If true, the empty state will be adjust to be visually centered inside the entire page context. Meant to be used in pairing with `scope: "page"`.') %></td>
+  <td><%= md('If true, the empty state will be visually centered inside the entire page context.') %></td>
   <td><%= md('Boolean') %></td>
   <td><%= md('`false`') %></td>
 </tr>
@@ -17,14 +17,13 @@
   <td><%= md('`nil`') %></td>
 </tr>
 <tr>
-  <td><%= md('`scope`') %></td>
-  <td><%= md('The layout of the component adjusts depending on this context setting:
-  
-- `nil` (default) sets up a "feature"-level layout for use within panels or cards for showing empty state for particular features.
+  <td><%= md('`size`') %></td>
+  <td><%= md('The size of the icon adjusts depending on this context setting:
+
+- `nil` (default) sets up a "feature"-level layout for use on whole page empty states and is intended to fill the stage.
 - `"compact"` similar to the default above, this compacts the spacing a little more for smaller contexts.
-- `"page"` is for use on whole page empty states and is intended to fill the stage.
 ') %></td>
-  <td><%= md('`nil` | `"compact"` | `"page"`') %></td>
+  <td><%= md('`nil` | `"compact"`') %></td>
   <td><%= md('`nil`') %></td>
 </tr>
 <tr>
@@ -48,11 +47,28 @@
 <tr>
   <td colspan="4"><strong>Content Slots</strong></td>
 </tr>
+<tr>
+  <td><%= md('`:sage_empty_state_actions`') %></td>
+  <td><%= md('
+    Slot into which buttons or other actions can be placed.
+  ') %></td>
+  <td></td>
+  <td></td>
+</tr>
+<tr>
+  <td><%= md('`:sage_empty_state_text`') %></td>
+  <td><%= md('
+    Slot into which text can be placed.
+  ') %></td>
+  <td></td>
+  <td></td>
+</tr>
 <tr>
   <td><%= md('`:sage_empty_state_video`') %></td>
   <td><%= md('
-  Slot into which video cards or other media can be placed.
+    Slot into which video cards or other media can be placed.
   ') %></td>
   <td></td>
   <td></td>
 </tr>
+
diff --git a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
@@ -3,10 +3,11 @@ class SageEmptyState < SageComponent
     center_vertical: [:optional, NilClass, TrueClass],
     graphic: [:optional, NilClass, String],
     icon: [:optional, NilClass, String],
-    scope: [:optional, NilClass, Set.new(["page", "compact", nil])],
+    icon_background: [:optional, NilClass, String],
+    size: [:optional, NilClass, Set.new(["compact", nil])],
     text: [:optional, NilClass, String],
     title: [:optional, NilClass, String],
-    title_tag: [:optional, NilClass, Set.new(["h1", "h2", "h3", "h4", "h5", "h5", "h6"])],
+    title_tag: [:optional, NilClass, Set.new(["h1", "h2", "h3", "h4", "h5", "h6"])],
   })
   def sections
     %w(empty_state_actions empty_state_text empty_state_video)

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
@@ -1,6 +1,6 @@
 <%
-variant = component.scope.present? ? component.scope : false
-title_tag = variant == "feature" ? "h1" : "h2"
+variant = component.size.present? ? component.size : false
+title_tag = variant == "compact" ? "h2" : "h1"
 if component.title_tag.present?
   title_tag = component.title_tag
 end
@@ -20,11 +20,19 @@ end
     </div>
   <% end %>
 
-  <%= sage_component SageIcon, {
-    icon: component.icon,
-    size: "3xl",
-    css_classes: "sage-empty-state__icon"
-  } if component.icon %>
+  <% if component.icon.present? %>
+    <div
+      class="sage-empty-state__icon-container"
+      style="--color-background-icon: <%= component.icon_background || SageTokens::COLOR_PALETTE[:MERCURY_30] %>"
+    >
+      <%= sage_component SageIcon, {
+        color: "white",
+        icon: component.icon,
+        size: variant == 'compact' ? 'xl' : '3xl',
+        css_classes: "sage-empty-state__icon"
+      }%>
+    </div>
+  <% end %>
 
   <div class="sage-empty-state__content">
     <% if component.title.present? %>

diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
@@ -4,28 +4,23 @@
 /// @group sage
 ////
 
-$-empty-state-graphic-feature-width: 100%;
-$-empty-state-graphic-feature-height: rem(142px);
-$-empty-state-graphic-page-width: 100%;
-$-empty-state-graphic-page-height: rem(336px);
-$-empty-state-page-max-width: rem(1064px);
+$-empty-state-graphic-default-width: 100%;
+$-empty-state-graphic-default-height: rem(104px);
+$-empty-state-graphic-compact-width: 100%;
+$-empty-state-graphic-compact-height: rem(56px);
+$-empty-state-icon-background-color: var(--color-background-icon);
+$-empty-state-icon-size: rem(104px);
+$-empty-state-icon-compact-size: rem(56px);
 
 .sage-empty-state {
-  margin-left: auto;
-  margin-right: auto;
-
-  &:not(.sage-empty-state--page) {
-    @include sage-grid-panel();
-
-    max-width: sage-container(md);
-    text-align: center;
-    justify-items: center;
-  }
-
-  &:not(.sage-empty-state--compact):not(.sage-empty-state--page) {
-    gap: sage-spacing();
-    padding: sage-spacing(2xl) sage-spacing();
-  }
+  @include sage-grid-panel();
+
+  gap: sage-spacing(sm);
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  max-width: sage-container(md);
+  text-align: center;
+  justify-items: center;
 }
 
 .sage-empty-state--center {
@@ -34,57 +29,21 @@ $-empty-state-page-max-width: rem(1064px);
   top: 50%;
   transform: translate(-50%, -50%);
   padding: sage-spacing();
-
-  @media screen and (min-width: sage-breakpoint(lg-max)) {
-    padding: 0;
-  }
-}
-
-.sage-empty-state--compact {
-  padding: sage-spacing(xs) sage-spacing();
-}
-
-.sage-empty-state--page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: sage-spacing();
-  width: 100%;
-  padding: sage-spacing(lg);
-
-  @media screen and (max-width: sage-breakpoint(lg-max)) {
-    flex-direction: column;
-  }
-
-  @media screen and (min-width: sage-breakpoint(xl-min)) {
-    flex-direction: row;
-    max-width: $-empty-state-page-max-width;
-  }
 }
 
 .sage-empty-state__actions,
 .sage-empty-state__custom-content,
 .sage-empty-state__video {
-  margin-top: sage-spacing();
-}
-
-.sage-empty-state__content {
-  .sage-empty-state--page & {
-    max-width: $-empty-state-graphic-page-width;
-
-    @media screen and (min-width: sage-breakpoint(xl-min)) {
-      order: 1;
-    }
-  }
+  margin-block-start: sage-spacing();
 }
 
 .sage-empty-state__graphic {
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  width: $-empty-state-graphic-feature-width;
-  height: $-empty-state-graphic-feature-height;
+  inline-size: $-empty-state-graphic-default-width;
+  block-size: $-empty-state-graphic-default-height;
 
   > img {
     display: block;
@@ -93,39 +52,47 @@ $-empty-state-page-max-width: rem(1064px);
     border-radius: sage-border(radius);
   }
 
-  .sage-empty-state--page & {
-    max-width: $-empty-state-graphic-page-width;
-    height: $-empty-state-graphic-page-height;
+  .sage-empty-state--compact & {
+    block-size: $-empty-state-graphic-compact-height;
+    inline-size: $-empty-state-graphic-compact-width;
+  }
+}
+
+.sage-empty-state__icon-container {
+  display: flex;
+  padding: sage-spacing(lg);
+  background-color: $-empty-state-icon-background-color;
+  border-radius: sage-border(radius-round);
 
-    @media screen and (min-width: sage-breakpoint(xl-min)) {
-      order: 2;
-    }
+  .sage-empty-state--compact & {
+    padding: sage-spacing(sm);
   }
 }
 
 .sage-empty-state__icon {
   display: inline-flex;
-  color: sage-color(charcoal, 100);
+  inline-size: $-empty-state-icon-size;
+  block-size: $-empty-state-icon-size;
 }
 
 .sage-empty-state__title {
-  @extend %t-sage-heading-4;
+  @extend %t-sage-heading-3;
 
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 90);
   word-wrap: break-word;
 
-  .sage-empty-state--page & {
-    @extend %t-sage-heading-1;
-  }
-
   &:not(:only-child) {
-    margin-bottom: sage-spacing(sm);
+    margin-block-end: sage-spacing(sm);
   }
 }
 
 .sage-empty-state__text {
   @extend %t-sage-body;
 
-  color: sage-color(charcoal, 300);
   word-wrap: break-word;
 }
+
+.sage-empty-state__text,
+.sage-empty-state__custom-content {
+  color: sage-color(grey, 70);
+}
diff --git a/packages/sage-assets/lib/stylesheets/components/_icon_card.scss b/packages/sage-assets/lib/stylesheets/components/_icon_card.scss
@@ -29,6 +29,7 @@
     --background-color: #{sage-color-combo($-color, default, background)};
   }
 }
+
 .sage-icon-card--round {
   border-radius: sage-border(radius-round);
 }