<%= 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"`.') %>
+
<%= md('If true, the empty state will be visually centered inside the entire page context.') %>
<%= md('Boolean') %>
<%= md('`false`') %>
@@ -17,14 +17,13 @@
<%= md('`nil`') %>
-
<%= md('`scope`') %>
-
<%= 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.
+
<%= md('`size`') %>
+
<%= 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.
') %>
-
<%= md('`nil` | `"compact"` | `"page"`') %>
+
<%= md('`nil` | `"compact"`') %>
<%= md('`nil`') %>
@@ -48,11 +47,28 @@
Content Slots
+
+
<%= md('`:sage_empty_state_actions`') %>
+
<%= md('
+ Slot into which buttons or other actions can be placed.
+ ') %>
+
+
+
+
+
<%= md('`:sage_empty_state_text`') %>
+
<%= md('
+ Slot into which text can be placed.
+ ') %>
+
+
+
<%= md('`:sage_empty_state_video`') %>
<%= md('
- Slot into which video cards or other media can be placed.
+ Slot into which video cards or other media can be placed.
') %>
@@ -75,7 +91,7 @@ export const EmptyState = ({
);
};
-EmptyState.SCOPES = EMPTY_STATE_SCOPES;
+EmptyState.SIZES = EMPTY_STATE_SIZES;
EmptyState.defaultProps = {
actions: null,
@@ -83,7 +99,8 @@ EmptyState.defaultProps = {
children: null,
graphic: null,
icon: null,
- scope: EmptyState.SCOPES.DEFAULT,
+ backgroundColor: null,
+ size: EmptyState.SIZES.DEFAULT,
text: null,
title: null,
titleTag: 'h2',
@@ -91,14 +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)),
- scope: PropTypes.oneOf(Object.values(EmptyState.SCOPES)),
+ /**
+ * 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,
};
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
deleted file mode 100644
index 23c7bd7b41..0000000000
--- a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { selectArgs } from '../story-support/helpers';
-import { Button } from '../Button';
-import { SageTokens } from '../configs';
-import { EmptyState } from './EmptyState';
-
-export default {
- title: 'Sage/EmptyState',
- component: EmptyState,
- // displays description on Docs tab
- parameters: {
- docs: {
- description: {
- component: '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.'
- },
- },
- },
- argTypes: {
- ...selectArgs({
- icon: SageTokens.ICONS,
- scope: EmptyState.SCOPES
- })
- },
- args: {
- actions: (
- <>
-
-
-
-
- ),
- icon: SageTokens.ICONS.GEAR,
- text: 'Text Here',
- title: 'Title Here'
- }
-};
-
-const Template = (args) => ;
-
-export const Default = Template.bind({});
-
-export const PageScope = Template.bind({});
-PageScope.args = {
- icon: null,
- graphic: (),
- scope: EmptyState.SCOPES.PAGE,
- text: (
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Elit arcu volutpat cursus ultricies ac, ultricies.
- Platea sed nibh molestie ut.
-
- ),
- title: 'Create your first Email Campaign',
- titleTag: 'h1',
- children: null,
- actions: (
- <>
-
-
-
- )
-};
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.mdx b/packages/sage-react/lib/EmptyState/EmptyState.story.mdx
new file mode 100644
index 0000000000..4bf2bfcc59
--- /dev/null
+++ b/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';
+
+
+
+# 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
+
+
+
+## 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
+
+
+
+### Compact
+
+
+
+### With Graphic
+
+
\ No newline at end of file
diff --git a/packages/sage-react/lib/EmptyState/configs.js b/packages/sage-react/lib/EmptyState/configs.js
index 6550148d23..75df4b370d 100644
--- a/packages/sage-react/lib/EmptyState/configs.js
+++ b/packages/sage-react/lib/EmptyState/configs.js
@@ -1,5 +1,4 @@
-export const EMPTY_STATE_SCOPES = {
+export const EMPTY_STATE_SIZES = {
DEFAULT: null,
- PAGE: 'page',
COMPACT: 'compact',
};
),
- scope: EmptyState.SCOPES.PAGE,
- text: (
-