refactor: adds background color to icon

Kajabi · Aug 2, 2024 · 0b53987 · 0b53987
1 parent 28fab7b
commit 0b53987
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 12 deletions.
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,6 +3,7 @@ class SageEmptyState < SageComponent
     center_vertical: [:optional, NilClass, TrueClass],
     graphic: [:optional, NilClass, String],
     icon: [:optional, NilClass, String],
+    icon_background: [:optional, NilClass, String],
     size: [:optional, NilClass, Set.new(["compact", nil])],
     text: [:optional, NilClass, String],
     title: [:optional, NilClass, String],

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
@@ -20,11 +20,18 @@ end
     </div>
   <% end %>
 
-  <%= sage_component SageIcon, {
-    icon: component.icon,
-    size: variant == 'compact' ? 'xl' : '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, {
+        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
@@ -8,6 +8,7 @@ $-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);
 
@@ -57,9 +58,20 @@ $-empty-state-icon-compact-size: rem(56px);
   }
 }
 
+.sage-empty-state__icon-container {
+  display: flex;
+  background-color: $-empty-state-icon-background-color;
+  padding: sage-spacing(lg);
+  border-radius: sage-border(radius-round);
+
+  .sage-empty-state--compact & {
+    padding: sage-spacing(sm);
+  }
+}
+
 .sage-empty-state__icon {
   display: inline-flex;
-  color: sage-color(grey, 60);
+  color: sage-color(white);
   inline-size: $-empty-state-icon-size;
   block-size: $-empty-state-icon-size;
 }

diff --git a/packages/sage-react/lib/EmptyState/EmptyState.jsx b/packages/sage-react/lib/EmptyState/EmptyState.jsx
@@ -12,6 +12,7 @@ export const EmptyState = ({
   children,
   graphic,
   icon,
+  backgroundColor,
   size,
   text,
   title,
@@ -40,11 +41,16 @@ export const EmptyState = ({
         </div>
       )}
       {icon && (
-        <Icon
-          icon={icon}
-          size={Icon.SIZES.XXXL}
-          className="sage-empty-state__icon"
-        />
+        <div
+          className="sage-empty-state__icon-container"
+          style={{ '--color-background-icon': backgroundColor || SageTokens.COLOR_PALETTE.MERCURY_30 }}
+        >
+          <Icon
+            icon={icon}
+            size={Icon.SIZES.XXXL}
+            className="sage-empty-state__icon"
+          />
+        </div>
       )}
       <div className="sage-empty-state__content">
         {title && (
@@ -92,6 +98,7 @@ EmptyState.defaultProps = {
   children: null,
   graphic: null,
   icon: null,
+  backgroundColor: null,
   size: EmptyState.SIZES.DEFAULT,
   text: null,
   title: null,
@@ -105,6 +112,7 @@ EmptyState.propTypes = {
   children: PropTypes.node,
   graphic: PropTypes.node,
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
+  backgroundColor: PropTypes.string,
   size: PropTypes.oneOf(Object.values(EmptyState.SIZES)),
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
@@ -38,7 +38,7 @@ export const Default = Template.bind({});
 export const CompactSize = Template.bind({});
 CompactSize.args = {
   icon: null,
-  graphic: (<img src="//source.unsplash.com/random/530x500" alt="" />),
+  graphic: (<img src="https://unsplash.it/2000/1100" alt="" />),
   size: EmptyState.SIZES.PAGE,
   text: (
     <p>