docs: updates Empty States docs pages for Rails and React

docs/app/views/examples/components/empty_state/_preview.html.erb

@@ -8,7 +8,7 @@
 <% 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",

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.') %></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,8 +17,8 @@
   <td><%= md('`nil`') %></td>
 </tr>
 <tr>
-  <td><%= md('`scope`') %></td>
-  <td><%= md('The layout of the component adjusts depending on this context setting:
+  <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.

docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb

@@ -26,6 +26,7 @@ end
       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"

packages/sage-assets/lib/stylesheets/components/_empty_state.scss

@@ -71,7 +71,6 @@ $-empty-state-icon-compact-size: rem(56px);
 
 .sage-empty-state__icon {
   display: inline-flex;
-  color: sage-color(white);
   inline-size: $-empty-state-icon-size;
   block-size: $-empty-state-icon-size;
 }

packages/sage-react/lib/EmptyState/EmptyState.jsx

@@ -46,8 +46,9 @@ export const EmptyState = ({
           style={{ '--color-background-icon': backgroundColor || SageTokens.COLOR_PALETTE.MERCURY_30 }}
         >
           <Icon
+            color={Icon.COLORS.WHITE}
             icon={icon}
-            size={Icon.SIZES.XXXL}
+            size={size === EmptyState.SIZES.COMPACT ? Icon.SIZES.XL : Icon.SIZES.XXXL}
             className="sage-empty-state__icon"
           />
         </div>
@@ -107,15 +108,48 @@ EmptyState.defaultProps = {
 };
 
 EmptyState.propTypes = {
+  /**
+   * Slot into which buttons or other actions can be placed.
+   */
   actions: PropTypes.node,
+  /**
+   * If true, the Empty State will be visually centered inside the entire page context.
+   */
   centerVertical: PropTypes.bool,
+  /**
+   * The content to be rendered within the Empty State.
+   */
   children: PropTypes.node,
+  /**
+   * Adds a graphic above the content.
+   */
   graphic: PropTypes.node,
+  /**
+   * Adds an icon above the content.
+   */
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
+  /**
+   * Sets the background color of the icon container. Defaults to Mercury 30
+   */
   backgroundColor: PropTypes.string,
+  /**
+   * The size and context of the Empty State.
+   */
   size: PropTypes.oneOf(Object.values(EmptyState.SIZES)),
+  /**
+   * Sets the text for the Empty State.
+   */
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Sets the title for the Empty State.
+   */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Sets which HTML heading tag to use on the title.
+   */
   titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  /**
+   * Slot into which video cards or other media can be placed.
+   */
   video: PropTypes.node,
 };

packages/sage-react/lib/EmptyState/EmptyState.story.mdx

@@ -0,0 +1,92 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Button } from '../Button';
+import { SageTokens } from '../configs';
+import { EmptyState } from './EmptyState';
+
+<Meta title="Sage/EmptyState" component={EmptyState} />
+
+# Empty State
+
+The Empty State is displayed for main application features that have never been interacted with before. The Empty State is also used for smaller features in the app that primarily focus on data entry and have no data to show.
+
+## Accessibility
+
+Ensure images or graphics that are used in the Empty State component *do not* include alt text so that the image remains decorative and invisible to screen readers.
+
+## Properties
+
+<ArgsTable story="Default" />
+
+## Size
+
+The Empty State component has two sizes: default and `compact`. The default size is meant to be used for whole-page empty states and is intended to fill the stage. The compact size features a smaller icon and is intended to fill empty states for smaller contexts.
+
+### Default
+
+<Canvas>
+  <Story name="Default">
+    <EmptyState
+      actions={(
+        <>
+          <Button>Add Email Campaign</Button>
+          <Button subtle={true} color={Button.COLORS.SECONDARY}>Link</Button>
+        </>
+      )}
+      icon={SageTokens.ICONS.PEN}
+      title="Create your first Email Campaign"
+      titleTag="h1"
+      text={(<p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Elit arcu volutpat cursus ultricies ac, ultricies.
+      Platea sed nibh molestie ut.
+    </p>)}
+    />
+  </Story>
+</Canvas>
+
+### Compact
+
+<Canvas>
+  <Story name="Compact">
+    <EmptyState
+      actions={(
+        <>
+          <Button>Add Email Campaign</Button>
+          <Button subtle={true} color={Button.COLORS.SECONDARY}>Link</Button>
+        </>
+      )}
+      icon={SageTokens.ICONS.PEN}
+      size={EmptyState.SIZES.COMPACT}
+      title="Create your first Email Campaign"
+      titleTag="h1"
+      text={(<p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Elit arcu volutpat cursus ultricies ac, ultricies.
+      Platea sed nibh molestie ut.
+    </p>)}
+    />
+  </Story>
+</Canvas>
+
+### With Graphic
+
+<Canvas>
+  <Story name="WithGraphic">
+    <EmptyState
+      actions={(
+        <>
+          <Button>Add Email Campaign</Button>
+          <Button subtle={true} color={Button.COLORS.SECONDARY}>Link</Button>
+        </>
+      )}
+      graphic={(<img src="https://unsplash.it/2000/1100" alt="" />)}
+      title="Create your first Email Campaign"
+      titleTag="h1"
+      text={(<p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Elit arcu volutpat cursus ultricies ac, ultricies.
+      Platea sed nibh molestie ut.
+    </p>)}
+    />
+  </Story>
+</Canvas>