diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 27c40a70..5512b6bf 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -16,6 +16,10 @@ module.exports = function({ config }) {
'sass-loader'
],
include: path.resolve(__dirname, '../')
+ },
+ {
+ test: /\\.(png|jp(e*)g|svg|gif)$/,
+ use: ['file-loader'],
});
return config;
diff --git a/package.json b/package.json
index 68391db4..f5a58590 100644
--- a/package.json
+++ b/package.json
@@ -135,6 +135,7 @@
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-react-hooks": "^2.5.1",
"eslint-utils": "^1.4.3",
+ "file-loader": "^6.2.0",
"jest": "^27.4.6",
"jest-css-modules-transform": "^4.3.0",
"node-sass": "^8.0.0",
diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
index bee702cd..dd747722 100644
--- a/spec/__snapshots__/Storyshots.test.js.snap
+++ b/spec/__snapshots__/Storyshots.test.js.snap
@@ -6760,6 +6760,60 @@ exports[`Storyshots Components/EmptyState Full Width 1`] = `
`;
+exports[`Storyshots Components/EmptyState Image 1`] = `
+
+
+
+
+
+
+ No participants to display
+
+
+ Start recruiting from User Interviews' panel of 6M+ users and kick off your research!
+
+
+
+
+
+
+
+
+`;
+
exports[`Storyshots Components/EmptyState Margin Top 1`] = `
= {
@@ -30,6 +32,15 @@ export const PrimaryAction: Story = {
},
};
+export const Image: Story = {
+ args: {
+ image: ProfileSearchImage,
+ primaryAction:
,
+ subtitle: `Start recruiting from User Interviews' panel of 6M+ users and kick off your research!`,
+ title: 'No participants to display',
+ },
+};
+
export const FullWidth: Story = {
args: {
fullWidth: true,
diff --git a/src/EmptyState/EmptyState.tsx b/src/EmptyState/EmptyState.tsx
index 818abd18..69e78052 100644
--- a/src/EmptyState/EmptyState.tsx
+++ b/src/EmptyState/EmptyState.tsx
@@ -10,6 +10,7 @@ import './EmptyState.scss';
export interface EmptyStateProps {
className?: string;
fullWidth?: boolean;
+ image?: string;
marginTop?: 'sm' | 'md' | 'lg' | 'none';
primaryAction?: ReactNode;
subtitle?: string | ReactNode;
@@ -19,6 +20,7 @@ export interface EmptyStateProps {
const EmptyState = ({
className,
fullWidth = false,
+ image,
marginTop = 'sm',
primaryAction,
subtitle,
@@ -35,6 +37,11 @@ const EmptyState = ({
fullWidth && 'EmptyState--full-width',
)}
>
+ {image && (
+
+
+
+ )}
{title && (